Div使用Javascript在循环周期中移动 [英] Div Moving in cycle rotation using Javascript

问题描述

使用javascript可以循环旋转Div。我在一个HTML页面有四个DIV。我需要循环旋转这些DIV。

Is it possible to rotate a Div in cyclic rotation using javascript. I have four DIVs in an HTML page. I need to rotate those DIVs in a cyclic rotation.

如果可以告诉我现在。

If it's possible tell me now. It is urgent.

推荐答案

实际上并不难：

function moveDiv(t,mdiv) {
            t = t + 0.05; // "time"
            var r = 10, //radius of circle
                xcenter = 400, //x location of circles centre on screen
                ycenter = 400, //y location of circles centre on screen
                x = Math.floor(xcenter + (r * Math.cos(t))), //circles parametric function
                y = Math.floor(ycenter + (r * Math.sin(t))); //circles parametric function
            mDiv.style.top = x + "px"; //set divs new coordinates
            mDiv.style.left = y + "px"; //set divs new coordinates

            setTimeout(function() { //make sure the animation keeps going
                moveDiv(t,mdiv);
            }, 100);
}
    myDiv = //get div element
    moveDiv(1,myDiv); //start the animation

尚未测试，但这是关于它应该如何工作。请确保您将这些div的cssposition属性设置为absolute或fixed。另请参阅圈子的参数方程。

Haven't tested, but that's about how it should work. Make sure you set css "position" property of those divs to absolute or fixed. Also take a look at parametric equation for circle.

这篇关于Div使用Javascript在循环周期中移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！