4

我需要使用 jquery 在同一个轨道圆中旋转多个图像。我更改并延迟了两个图像的时间间隔。问题是几秒钟后两个图像都重叠了。我的代码是

            <script type="text/javascript">
            var p = 0;

            function moveit() {
            p += 0.02;

            var r = 135;
            var xcenter = 500;
            var ycenter = 200;
            var newLeft = Math.floor(xcenter + (r * Math.cos(p)));
            var newTop = Math.floor(ycenter + (r * Math.sin(p)));
            $('#friends').animate({
                    top: newTop,
                    left: newLeft,
                }, 10, function() {
                    moveit();
            $('#friends2').animate({
                top: newTop,
                left: newLeft,
            },15, function() {
                moveit();
            });
             }
            $(document).ready(function() {
                moveit();    
            });
            </script>

我的 css 和 html 源代码是

   #friends { position: absolute;     }         
     #friends2 { position: absolute;    }     

 <img src="Images/info.gif" id="friends"/>
<img src="Images/circle.jpg" id="circles" />
<img src="Images/help.gif" id="friends2" />

现场演示： http: //jsfiddle.net/W69s6/embedded/result/但这是针对单张图片的。有什么建议吗？？

编辑:: 我的形象 图像旋转

或者

示例链接http://www.templatemonster.com/demo/38228.html

4

2 回答 2

5

检查这个例子

它有两个以相同速度在同一轨道上旋转的项目。它永远不会重叠。

编辑：

这是以相同速度和相同轨道旋转但均等分离的 4 个项目的示例。

要添加更多项目，只需通过添加不同的角度来调整代码。

更新：

这是简单的图像版本

希望这会有所帮助。干杯！！！

于 2012-05-12T15:22:47.440 回答
1

您的代码有效，但看起来您有语法错误；您的第一次 moveit 通话未正确结束。

这个有相同的轨道，不同的速度 http://jsfiddle.net/thinkingsites/FyMCc/

编辑

您的错误是将命令在同一个函数中旋转两个项目。他们都抓住了相同的顶部和左侧，并且总是相互绑定，更不用说他们都调用了 moveit() 所以每次调用 moveit 时，它都会在内部被调用两次。

我已经修复了您的递归，因此它只发生一次，并使 moveit 接受目标元素以及不同的起始位置（移位）。

这个有相同的轨道，相同的速度，不同的位置 http://jsfiddle.net/thinkingsites/QAT7C/11/

于 2012-05-12T12:31:21.140 回答