Div moving in cycle rotation using JavaScript

后端 未结 4 1068
旧时难觅i
旧时难觅i 2021-01-29 07:22

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.

4条回答
  •  小蘑菇
    小蘑菇 (楼主)
    2021-01-29 07:48

    It's actually not hard:

    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
    

    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.

提交回复
热议问题