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

Effect Chart:

First, the analysis chart:

Inside the green border: the outer div element, relative positioning;

White round box: auxiliary analysis of the imaginary shape;

White dot: The center point of the Circle, the point O;

Center angle: Angular nog;

Yellow: Need to be arranged in a circular, absolutely positioned DIV elements;

Red dots: The coordinates of each yellow div, that is, the elements of absolute positioning, left values, and top values, set the point;

Second, the definition of the concept involved:

2.1, radians: radians are the units of measure of the angle .

(The red part is arc length, angle A is the circle angle corresponding to the arc length)

Arc length is equal to the radius of the arc, its pair of center angle of 1 radians . (that is, two rays are projected from the center to the circumference to form an arc with an angle and a positive pair of angles.) When the arc length is exactly equal to the radius of the circle, the angle of the two rays is 1 radians.

According to the definition, the number of radians per week is 2πr/r=2π,360° angle =2π radians, therefore,1 radians is about 57.3 °, that is 57°17 ' 44.806 ', 1° is π/180 radian, The approximate value is 0.01745 radians, Pilaris is 2π radian, the angle (that is 180°) is π radians, and the right angle is Π/2 radians.

The arc length =n2πr/360 (here n is the angle number, i.e. the arc length corresponding to the angle N). ）

========================================================

2.2, Sine: The string value is in the right triangle, the side of the length of the upper hypotenuse of the length of the value.

Math.sin (x): X required. An angle in radians. The angle is multiplied by 0.017453293 (2pi/360) to be converted to radians.

================================================

2.3, cosine: refers to the right-angled triangle acute angle adjacent edge and the hypotenuse ratio.

Math.sin (x): X required. An angle in radians. The angle is multiplied by 0.017453293 (2pi/360) to be converted to radians.

Third, the demand analysis:

3.1 Let these yellow Div, arranged on the circumference of the same circle

3.2 The way of arranging is the average distribution

Four, the principle analysis:

To allow the arrangement of Div to form a circle, the essence is to set the left value of each div and the relationship between the top value, so that the relationship between their values, according to the rules of the circle to set the value;

What is the rule of the 4.1 circle?

is Pi (pi); Multiply any value by this pi and multiply by 2 to get a circle. The "Any value" is the radius of the resulting circle; the larger the value, the larger the circle.

4.2 How do I find the relationship between the left and top values of each div?

The coordinates of the red dots in the upper-left corner of each yellow div in the above picture are the left-hand and top values, so that the red dots are just above the circumference, so left and tops are bound to be associated with this pi. Pi only has a circle.

V. Example analysis

I'm going to get the coordinates of the red dots in the diagram above, the left and top values of the Div,

left = NG + O's horizontal axis value (left)

Ordinate value (top) for top = on + or

So we first ask for the value of each of the two right angles of the right triangle with a circle radius of the vertex and a round angle of the hypotenuse. (The on segment of Blue right-angled triangle and the length of the NG segment in the figure above)

In the case of a half circle, the value of the bottom is larger when the angle is large and the radius is constant.

Sine formula: sin (x) = to the Edge/hypotenuse x larger, the hypotenuse invariant (RADIUS), then to the Edge (the NG segment in the above image) will become larger;

Yu Shin formula cos (x) = adjacent edge/hypotenuse x becomes larger, the hypotenuse is constant (RADIUS), then the adjacent edge (on line in the above image) is smaller;

270 degrees of Orthodox value, is negative 1;

The cosine of 180 is, is minus 1;

5.1 Set a circle first

Radius: 200px;

5.2 Average Circle of this circle

Let's say we have 8 div to distribute evenly over the circumference of this 200PX radius. So here we go through the angle of the average (the division of the arc or the average, the risk should be divided by angle);

Average: The overall angle of the circle's center angle is 360 degrees, the average of 8, is 360/8; In this way, each of the center angles, the arc length and radian, are equal.

5.3 Calculate the length of Ng, that is, the left of the Div, that is, the horizontal axis of the red point;

For this value, the sine function is used;

Formula Math.sin (X) = to edge/bevel;

We need to know about X, we need to know the hypotenuse, we can find the "edge" value, that is, the length of NG;

5.3.1 here The X is radians, that is, the angle number, which is said in the definition above, the number of radians is the number of angles;

According to the formula: the angle number multiplied by the pi/180, is the radian number; i.e. X = (360/8) * pi/180

The calculated X is the number of radians after which the circle is divided evenly;

The 5.3.2 hypotenuse is the radius of the circle, that is, 200;

5.3.3 "to edge" value, that is, the length of NG;

Variant according to the formula above: Pair Edge (NG) = Math.sin (X) * Bevel

That is: to the side (NG) = Math.sin (X) * = Math.sin ((360/8) * pi/180) * 200;

OK, now we're going to find the value of the Edge (NG), the horizontal axis of the red dot, the left value of DVI;

5.4 Find each angle corresponding to the right angle, that is, the value of the length of the edge

Because each of the center angle, is divided evenly, so multiply by a multiple, you get the angle corresponding Radian value, that is, the angle value

Here using the index of the div as a multiple, the value multiplied by x, you get each of the equal, each circle angle of the radian value;

to the side = Math.sin (x* index) * 200;

The left value of the div is used as the value of the "Pair edge".

5.5 Div's top value, that is, the length value of the on segment

With the principle of the above four points, the sine value is changed to cosine

Adjacent Edge (ON) = Math.Cos (x* index) * 200;

Set this value to the top value of the div;

Based on the above analysis: the code below, you can press a circle, to arrange div

Radius
 var radius =;
 Each box corresponds to the angle;
 var AVD = 360/$ (". Box"). Length;
 Each box corresponds to the radian;
 var ahd = avd*math.pi/180;
 

 $ (". Box"). each (the function (index, Element) {
 $ (this). css ({' Left ': Math.sin (Ahd*index)) *radius, "Top": Math.Cos ( ahd*index)) *radius});
 

5.6 Set the position of this circle

The position of the circle is based on the center coordinates of the circle, so we are going to set the coordinate value of the center of the circle.

The coordinates of the center of the circle have changed, then the left top of the corresponding Div should also be changed;

such as the center of the left:100px; top:100px;

Then the left and top of each div should also add this value:

The code is as follows

$ (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 =;
 Each box corresponds to the angle;
 var AVD = 360/$ (". Box"). Length;
 Each box corresponds to the radian;
 var ahd = avd*math.pi/180; 
 Sets the position of the center point of the Circle
 $ (". Dot"). css ({"Left":d otleft, "Top":d ottop});
 $ (". Box"). each (the function (index, Element) {
 $ (this). css ({' Left ': Math.sin ((Ahd*index)) *radius+dotleft, top: Math.Cos ((Ahd*index)) *radius+dottop});})
 

Six summary:

6.1 When it comes to curves or arcs, you should use the angle or radian to analyze and find the correlation;

6.2 To find the relationship or proportion, so that the value and value is a relationship between the use of multiplying or divided by a multiple; For example, the magnifying glass previously written, is proportional relationship;

Seven previous understandings were incorrect, and now updated the analysis of the picture and analysis; Thank you for the string! The Hint ~

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