Javascript 在帧div内设置照片（或div）动画_Javascript_Jquery_Html_Css_Animation

Javascript 在帧div内设置照片（或div）动画

javascript jquery html css animation

Javascript 在帧div内设置照片（或div）动画,javascript,jquery,html,css,animation,Javascript,Jquery,Html,Css,Animation,这幅画本身就很能说明问题。div“behind”包含了一堆小正方形的照片，我希望这些照片能够顺利地制作动画。我真的不擅长jQuery动画，有人能帮我解决这个问题吗（窗口是固定的，图片“在”窗口内移动，自页面加载后一直处于动画状态）持续多长时间？点击一下我现在不在自己的电脑后面，但请尝试以下方法：这是用于单击后的： $("#frame").click( function(){ $("#photo").animate({"left": "-=100px"}, functio

这幅画本身就很能说明问题。div“behind”包含了一堆小正方形的照片，我希望这些照片能够顺利地制作动画。我真的不擅长jQuery动画，有人能帮我解决这个问题吗

（窗口是固定的，图片“在”窗口内移动，自页面加载后一直处于动画状态）

持续多长时间？点击一下

我现在不在自己的电脑后面，但请尝试以下方法：

这是用于单击后的：

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

如此类推，在每一行之后，你可以放一个新行，就像我在代码的第3行和第4行所做的那样。这样，后面的照片就成了一个正方形

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

编辑：顺便说一句，您只能向左、向右或上下移动，可以使动画平滑的方法是将照片放大并缩小。因此，您需要例如“宽度”参数。

查看jQuery网站。

您可以这样做

标记：

<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>

js:

小提琴：

编辑（永远循环）

我是SIN/COS函数的粉丝，所以让我与您分享我对这个问题的看法

这个想法是要有一个功能，永远运行，并尽快使动画是平滑的。我使用sin/cos函数来确定div的新x（左）和y（上）坐标，我有一系列参数，可以配置动画的速度和范围

只需将其粘贴到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>


a b c

def

g h i

jkl

var start=新日期（）；
var x_速度=0.001，//更大--->更快
y_速度=0.01，//更大-->更快
x_乘数=300，//我能在x轴上走多远
y_乘数=20，//我在y轴上能走多远
x_偏移=0，
y_偏移=0；
函数animate（）{
var now=新日期（）；
var已用时间=现在-开始；
var x=数学sin（（经过的时间）*x速度）*x乘法器+x偏移量；
变量y=数学cos（（经过的时间）*y速度）*y乘法器+y偏移量；
$（“#stuff”）.css({
左:x,，
顶部：y
});
设置超时（动画，0）；
}
设置超时（动画，76）；

这是一个或多个图片上的可拖动“窗口”，还是“窗口”固定且图片移动？窗口固定，图片“在”窗口内移动，自页面加载以来一直处于动画状态基本上就是这样。如果我想永远运行呢？也就是说，你可以将代码包装在一个函数中，然后用setInterval永远循环它。。摆弄它：）谢谢！已将您标记为已接受。你知道他们是如何在动画中改变速度的吗？（比如，开始快速移动，最后变慢……）不客气！关于动画过程中的速度和过渡缓和的类型，请查看文档：即，如果要更改它，请按以下方式设置动画道具：$（“#元素”）animate（{/*css*/}，durationMS，'easing'/*，callback fn*/）；我忘了花点时间，但我想斯图韦布已经帮上忙了。（毫秒数在像素数之后）。谢谢，你们都帮了我。。我已经有了一个相当不错的基础，很高兴与大家分享！如果修改参数，可以使动画运行得更慢，就像问题中的一样。请记住使用不同的x&y速度，以便动画看起来更随机。你甚至可以在这里添加一点Math.random使动画更加随机。。。但你需要试验一段时间，直到它满足你的需要。

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

<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>