Javascript 使用santa.gif在我的网页上制作新年动画：）_Javascript_Jquery

Javascript 使用santa.gif在我的网页上制作新年动画：）

javascript jquery

Javascript 使用santa.gif在我的网页上制作新年动画：）,javascript,jquery,Javascript,Jquery,是我的个人网页我使用这个html标记来移动PozSanta.gif <div id="animatedImage" style="position:fixed;padding-top:550px;z-index:99;left:1px;bottom:1px;"> <img src="http://www.fatihtoprak.com/wp-content/themes/PozWhite/assets/img/Poz_Santa.gif" alt="animatedImag

是我的个人网页

我使用这个html标记来移动PozSanta.gif

<div id="animatedImage" style="position:fixed;padding-top:550px;z-index:99;left:1px;bottom:1px;">
 <img src="http://www.fatihtoprak.com/wp-content/themes/PozWhite/assets/img/Poz_Santa.gif" alt="animatedImage" />
</div>
<script type="text/javascript" src="http://www.fatihtoprak.com/wp-content/themes/PozWhite/assets/js/PozSanta.js"></script>

我想对此进行一些更改，例如，当Pozsanta.gif到达屏幕的末尾时，右侧应该返回（从右向左走）？如果是的话，这可能吗

Js文件：

谢谢。

在此行中添加一个额外条件：

  if (0 > distanceBall && directionBall == 1) 
  { 
    directionBall=0; 
  }
  else if (distanceBall == 0 && directionBall == 0) 
  { 
    directionBall = 1; 
    distanceBall = 1;
  }

然后交替方向：

  if (directionBall == 1) 
  { 
     distanceBall += 1;
  }
  else
  {
     distanceBall -= 1;
  }

翻转图像是一回事，当它是平面图像时，但动画gif是一系列图像，一个接一个地排列播放，如果你愿意，想象一个胶片卷，然后将gif的每一个移动都成像为同一件事。因此，问题不在于翻转图像，而在于翻转其中的整行图像，我很确定这是不可能的，而不是通过javascript或任何我可以马上想到的基于服务器/客户端的语言

你可以考虑的是从GIF中提取所有的帧，并使它们成为精灵风格的图像，并通过一些灵巧的脚本翻转脚本，通过SigRITE图像逐帧地通过屏幕。

并不是说我已经测试了这个软件，而是通过谷歌提取gif帧的第一个结果可能可以让你开始。

这是你的代码，一个简单的css需要翻转图像，无论是gif或jpg还是任何其他格式，我们都可以对图像应用翻转

在此处查看您的工作示例

注意：图像将在屏幕宽度上移动，因为它是必需的。请在桌面上复制并检查

<!DOCTYPE html>
<html>
<style>
.left {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}
.right {
        -moz-transform: scaleX(1);
        -o-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

</style>
<body>
<div id="animatedImage" style="position:fixed;padding-top:550px;z-index:99;left:1px;bottom:1px;">
 <img id="img1" src="http://www.fatihtoprak.com/wp-content/themes/PozWhite/assets/img/Poz_Santa.gif" alt="animatedImage" />
</div>
<script>
var distanceBall=0; 
var directionBall=1; 
document.getElementById('animatedImage').style.top = 10;
document.getElementById('animatedImage').style.left = 10;
var timerToggle=null; 
animateBall();
var setting = 0;          

  function animateBall() {   
  document.getElementById("animatedImage").style.left=distanceBall + "px";

  distanceBall+=directionBall;

  if (distanceBall>window.screen.width - 70) { 
  document.getElementById('animatedImage').style.top = 10;
  document.getElementById('animatedImage').style.left = 10;
  directionBall = -1;
  document.getElementById('img1').className = 'left';
  }

  if (distanceBall<0) {
  directionBall = 1;
  document.getElementById('img1').className = 'right';
  }

  timerToggle=setTimeout(function() { animateBall(); },1);
  }
</script>
</body>
</html>


.左{
-moz变换：scaleX（-1）；
-o变换：scaleX（-1）；
-webkit转换：scaleX（-1）；
转换：scaleX（-1）；
过滤器：FlipH；
-ms过滤器：“FlipH”；
}
.对{
-moz变换：scaleX（1）；
-o变换：scaleX（1）；
-webkit转换：scaleX（1）；
变换：scaleX（1）；
过滤器：FlipH；
-ms过滤器：“FlipH”；
}
var distanceBall=0；
var-directionBall=1；
document.getElementById（'animateImage'）.style.top=10；
document.getElementById（'animateImage'）.style.left=10；
var timerToggle=null；
动画球（）；
var设置=0；
函数animateBall（）{
document.getElementById（“animateImage”）.style.left=distanceBall+“px”；
距离球+=方向球；
如果（距离球>window.screen.width-70）{
document.getElementById（'animateImage'）.style.top=10；
document.getElementById（'animateImage'）.style.left=10；
方向球=-1；
document.getElementById（'img1'）。className='left'；
}
如果你想让他在月球上行走史蒂文：你能给我举个例子吗（：你有翻转的gif图像吗？没有，李..我没有。也许它可以用CSS3制作？我还在这里找到一些翻转图像的软件：现在，我们只需要破解一些jquery或javascript代码。有人帮忙吗？我想我可以这么做克里斯谢谢你，但我想我可以用CSS3翻转效果修复它。只需要破解一些js代码。@chris-我们可以翻转.gif图像，请查看。您从.gif提取帧并应用sprite样式的方法很麻烦，我们可以使用简单的CSS翻转。