Implementation of a circular div element based on JavaScript (ii) _javascript tips

First, the principle analysis

　　1.1 How to let the div element move up?

The essence of the movement is to change the position of the div, that is, to change its left and top values;

　2.2 How does the DIV element move when it is on the specified circumference?

Through the last analysis, let Div press the circle queue, we know, if you want to let div positioned on the circumference, mainly based on the angle (radian) to achieve.

Look at the picture below:

How does the positioning of our B and C elements be achieved in the diagram above? According to the previous formula, the following:

(Index: The indexed value of the element, radius radius, Dotleft: The horizontal axis of the center, Dottop: The ordinate of the center)

left = Math.sin ((ahd*bindex)) *radius+dotleft
B's top = Math.Cos ((ahd*bindex)) *radius+dottop
C's left = Math.sin ((ahd*cindex)) *radius+dotleft
C's top = Math.Cos ((ahd*cindex)) *radius+dottop

You can see from the formula, all the same, just B and C index, that is, the index value is not the same, so that the angle (radian) number is different, the result is the value of sine and cosine is different, so the positioning is different, but the result is in this circle changes. Will not run away from this circle;

What if I wanted to get the B element right now to position it in the C element?

is to have the angle of the B element (radians) the same as the C element, and then apply the formula above.

The center angle of the current use of the B element is the center angle of the aob,c element and is the AOC; B and C elements of the difference between the above figure in the angle (radian) value, that is, two blue lines between the angle (radians);

The conclusion is that changing the angle (radian) can change the position of the elements in the circumference.

Second, the case analysis

Based on the above analysis, we already know how to change the bit of the div on the circumference; now what we have to do is change to make the element appear to be in motion?

is "speed"; there is movement, there is speed.

Speed is the distance to move within a specified time: speed = distance/time

The speed is too fast is "instantaneous movement" let b move to C;

Slow, you can see B a little to C position move;

Time: Time in javascript: The SetInterval (..., time)

For example: SetInterval (move, 1000) we set an interval of 1000 milliseconds for the elements to move.

The move in this example is to change the left and top values of the DVI, and to change the value, you need to use the formula that moves on the circumference above.

Speed: set a speed speed = 5;

Here's 5, which is the angle, that is, let the center of the circle, every 1000 milliseconds, change 5 degrees.

Speed = speed*math.pi/180; Converts the angle of this change to radians because the Math.sin accepts only the parameters of the Radian unit;

Concluded

function Move () {
speed + left
= Math.sin ((ahd*bindex+speed)) *radius+dotleft;
Math.Cos ((ahd*bindex+speed)) *radius+dottop
}

Third, the implementation code:

 $ (function () {//center point horizontal axis var Dotleft = ($ (". Container"). Width ()-$ (". Dot"). Width ())/2;
 Center point ordinate var dottop = ($ (". Container"). Height ()-$ (". Dot"). Height ())/2;
 Starting angle var stard = 0;
 Radius var radius = 200;
 Each box corresponds to the angle;
 var AVD = 360/$ (". Box"). Length;
 Each box corresponds to the radian;
 var AHD = avd*math.pi/180;
 Speed of movement var speed = 2;
 Sets the position of the center point of the Circle $ (". Dot"). css ({"Left":d otleft, "Top":d ottop}); Set Div Circle $ (". Box"). each (the function (index, Element) {$ (this). css ({"Left": Math.sin ((Ahd*index)) *radius+dotleft, "
 Top ": Math.Cos ((Ahd*index)) *radius+dottop});
 }); 
 Motion function var Fun_animat = function () {speed = speed<360?speed:2;
 The speed of transport is speed+=2;
 The distance of motion, i.e. the number of radians in motion; 
 var ainhd = speed*math.pi/180; Position DIV element $ (". Box") by speed. Each (function (index, Element) {$ (this). css ({' Left ': Math.sin ((AHD*INDEX+AINHD)) *radius+
 Dotleft, "Top": Math.Cos ((AHD*INDEX+AINHD)) *radius+dottop});
 });
 }//Timed call motion function var setanimate = setinterval (fun_animat,100); })

In fact, we can also think in reverse, that is, every 1000 milliseconds, we get a coordinate point on the circumference, assigning the left and top values of this point to the DIV element that needs to change the position, that is, the movement! ~~

The above is the entire content of this article, I hope to help you, interested friends can refer to the article "based on JavaScript implementation by circular DIV element (a)" and "based on JavaScript implementation by circular DIV elements (iii)", thank you for the support of the cloud-Habitat community!