0

这是我的个人网页。

我用这个 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文件：

http://www.fatihtoprak.com/wp-content/themes/PozWhite/assets/js/PozSanta.js

谢谢。

4

3 回答 3

2

这是您的代码，需要一个简单的 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>
于 2012-12-28T04:47:15.640 回答
1

在这一行添加一个额外的条件：

  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;
  }
于 2012-12-28T02:48:16.220 回答
-1

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

但是，您可以考虑的一件事是从 gif 中提取所有帧，并将它们制作成精灵样式的图像，并通过一些巧妙的脚本动画书逐帧遍历屏幕上的精灵图像。

并不是说我已经测试过这个特定的软件，而是通过谷歌提取 gif 帧的第一个结果是http://www.addictivetips.com/windows-tips/how-to-extract-frames-from-gif-animation -image/或许可以帮助您入门。

于 2012-12-28T02:50:18.503 回答