使用jquery在圆圈中旋转多个图像 [英] Rotate multiple images in a circle using jquery

问题描述

我需要使用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（ ）; 
}）; 
} 
 $（文件）.ready（function（）{
 moveit（）; 
}）; 
< / script> 
  

我的css和html源代码是

  #friends {position：absolute;} 
＃friends2 {position：absolute;} 
 
< img src =Images / info .gifid =friends/> 
< img src =Images / circle.jpgid =circles/> 
< img src =Images / help.gif id =friends2/> 
  

现场演示：

解决方案

查看此示例

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

编辑：

并且 这里的示例 4个项目以相同的速度和相同的轨道旋转，但同样如此分开。

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

更新：

这是简单的图像版本

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

I need to rotate multiple images in the same orbit circle using jquery.I changed and delayed the time intervals for both the images. The problem is both the images are overlapping after few seconds. my code is

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

my css and html source codes are

   #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" />

Live demo: http://jsfiddle.net/W69s6/embedded/result/ but this is for single image.. Any suggestion ??

edit:: my image

or

sample link http://www.templatemonster.com/demo/38228.html

解决方案

Check this example

It has two items which is rotating on same orbit at same speed. It will never overlap.

EDIT:

And here is the example for 4 items to be rotated at same speed and same orbit but equally separated.

To add more items, just tweak the code by adding different angle to it.

UPDATE:

And here is the simple image version

Hope this will help. Cheers !!!

这篇关于使用jquery在圆圈中旋转多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！