Question

图片本身几乎是解释性的。 div“后面”包含一堆我想要平滑动画的小方形照片。我对jQuery动画真的不太好，有人可以帮我解决这个问题吗？

（窗口固定，图片在“里面”移动，自页面加载后动画永久）

enter image description here

Answer 1

你可以做这样的事情

标记：

<div id="mask">
    <img id="pic" alt="my img" src="http://www.destination360.com/north-america/us/idaho/images/s/idaho-sawtooth-mountains.jpg">
</div>

的CSS：

#mask{
    overflow:hidden;
    width:100px;
    height:100px;
    position:absolute;
    border:5px solid #000000;
}
#mask img{
    border:none;
    position:absolute;
}

js：

$('#pic').animate({left:-200},3000).animate({top:-50},3000); /* and so on... */

小提琴：

http://www.jsfiddle.net/steweb/YHAZ9/

修改（永久循环播放）http://www.jsfiddle.net/steweb/YHAZ9/4/

Answer 2

我是SIN / COS功能的粉丝，所以让我与你分享我对这个问题的看法。

我们的想法是拥有一个永远运行的功能，并尽快使动画流畅。我使用sin / cos函数来确定div的新x（左）和y（顶部）coordenates，我有一系列参数可以配置动画的速度和范围。

只需将其粘贴到HTML文件中并在浏览器中进行测试即可。

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    </head>
    <body>
        <div id="stuff" style="background: red; width: 200px; height: 200px; margin: auto; position: relative;">
        a b c<br />
        d e f<br />
        g h i<br />
        j k l<br />
        </div>
        <script>
            var start = new Date();
            var x_speed = 0.001, // bigger ---> faster
                y_speed = 0.01, // bigger ---> faster
                x_multiplier = 300, // how far away I can go on the X axis
                y_multiplier = 20, // how far away I can go on the Y axis
                x_offset = 0,
                y_offset = 0;

            function animate() {

                var now = new Date();
                var elapsed_time = now - start;

                var x = Math.sin((elapsed_time)*x_speed) * x_multiplier + x_offset;
                var y = Math.cos((elapsed_time)*y_speed) * y_multiplier + y_offset;


                $("#stuff").css({
                    left : x,
                    top : y
                });

                setTimeout(animate, 0);
            }

            setTimeout(animate, 76);

        </script>
    </body>
</html>

Answer 3

多久？点击后？

我现在不在我自己的电脑后面，但尝试这样的事情：

这是在点击之后：

$("#frame").click(
   function(){
      $("#photo").animate({"left": "-=100px"}, function(){
            $("#photo").animate({"top": "-=100px"}, function(){
                 $("#photo").animate({"left": "=100px"});
            });
      });
});

依此类推，在每一行之后你可以添加一个新行，就像我在代码中第3行和第4行所做的那样。这样，背后的照片就会在正方形中移动。

只是一个建议，不知道这是否正是你想要的。

编辑：顺便说一句，你只能向左，向右或向上和向下移动，可以使动画变得平滑的是增长照片并缩小它。因此，您需要“width”参数。检查jQuery网站here。

动画帧div内的照片（或div）

3 个答案: