Div Moving In Cyclical Rotation Using Javascript

Question

Is it possible to rotate a div in a circular rotation using javascript. I have four DIVs on an HTML page. I need to rotate these divs in a cyclic rotation.

If possible, tell me now. This is urgent.

Answer 1

This is actually not complicated:

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 

Not tested, but it's about how it should work. Make sure the css "position" property for these divs is absolute or fixed. Also consider the parametric equation for the circle.

Answer 2

You can use the Raphaël JavaScript library to accomplish something like this.

Steve

Answer 3

Not sure I understand the question, but look at the jQuery 'Cycle' plugin: http://www.malsup.com/jquery/cycle/

Answer 4

this could have been done ... but not so easily, and you could not have kept the original feel of the contents inside the div.

if I do not understand your question, if you just talk about cycling through 4 divs ... it is defiantly possible and very easy. But if you ask if you can rotate the actual div ...