效果圖：

一、分析圖：

綠色邊框內(nèi)：外層的DIV元素,相對(duì)定位;

白色圓形框：輔助分析的想象形狀;

白點(diǎn)：為白色圓形的圓心點(diǎn)，中心點(diǎn)，點(diǎn)o;

圓心角：角NOG;

黃色：需要按圓形排列的，絕對(duì)定位的DIV元素;

紅色點(diǎn)：為每個(gè)黃色DIV的坐標(biāo)點(diǎn);即絕對(duì)定位時(shí)的元素，left值 和 top值 ，設(shè)置的點(diǎn);

二、涉及到的概念定義：

2.1、弧度：弧度是角的度量單位。

（紅色部分為弧長(zhǎng)，角A為弧長(zhǎng)對(duì)應(yīng)的圓心角）

弧長(zhǎng)等于半徑的弧，其所對(duì)的圓心角為1弧度。(即兩條射線從圓心向圓周射出，形成一個(gè)夾角和夾角正對(duì)的一段弧。當(dāng)這段弧長(zhǎng)正好等于圓的半徑時(shí)，兩條射線的夾角的弧度為1)。

根據(jù)定義，一周的弧度數(shù)為2πr/r=2π，360°角=2π弧度，因此，1弧度約為57.3°，即57°17'44.806''，1°為π/180弧度，近似值為0.01745弧度，周角為2π弧度，平角（即180°角）為π弧度，直角為π/2弧度。

弧長(zhǎng)=n2πr/360  （在這里n就是角度數(shù)，即圓心角n所對(duì)應(yīng)的弧長(zhǎng)。）

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

2.2、正弦值：弦值是在直角三角形中,對(duì)邊的長(zhǎng)比上斜邊的長(zhǎng)的值。

Math.sin(x) : X 必需。一個(gè)以弧度表示的角。將角度乘以 0.017453293 （2PI/360）即可轉(zhuǎn)換為弧度。

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

2.3、余弦值:是指直角三角形銳角鄰邊與斜邊的比值。

Math.sin(x) : X 必需。一個(gè)以弧度表示的角。將角度乘以 0.017453293 （2PI/360）即可轉(zhuǎn)換為弧度。

三、需求分析：

3.1 讓這些黃色的DIV ，在同一個(gè)圓的圓周上排列

3.2 排列的方式是平均分布

四、原理分析：

要讓DIV的排列，形成一個(gè)圓形，實(shí)質(zhì)就是設(shè)置每個(gè)DIV的left值  和 TOP值 之間的關(guān)系，讓它們之間值的關(guān)系，按照?qǐng)A形的規(guī)律去設(shè)值;

4.1 圓形的規(guī)律是什么？

　　是PI（圓周率）;  任何值乘以這個(gè)PI再乘2，就可以得到一個(gè)圓形。這個(gè)“任何值”就是得到的圓形的半徑;值越大，當(dāng)然這個(gè)圓形也就越大。

4.2 怎么找到每個(gè)DIV的Left 和 TOP值之關(guān)系？

　　上圖中的每個(gè)黃色DIV左上角的紅色點(diǎn)的坐標(biāo)，就是left 和 TOP值 ，要讓這個(gè)紅色的點(diǎn)，正好分布在這個(gè)圓周上面，那么Left 和 top 必然要和這個(gè)PI關(guān)聯(lián)起來(lái)。有PI才有圓。

五、實(shí)例分析

我要得到上圖中，紅點(diǎn)的坐標(biāo)值，即DIV的left 和 TOP值，

LEFT = NG +  o的橫坐標(biāo)值（left）

TOP = ON + or的縱坐標(biāo)值（TOP）

所以先要求出每個(gè)一以圓心o為頂點(diǎn)，以圓形半徑為斜邊，的直角三角形的兩個(gè)直角邊的值。（上圖中藍(lán)色直角三角形的ON線段和NG線段的長(zhǎng)度值）

　　以半邊圓形來(lái)看，當(dāng)圓心角變大，半徑不變的情況下，這個(gè)底邊的值，是會(huì)變大的;

　　正弦公式：sin(X) = 對(duì)邊/斜邊  X變大，斜邊不變（半徑），那么對(duì)邊（上圖中的NG線段）是會(huì)變大的;

　　余統(tǒng)公式  cos(X) = 鄰邊/斜邊  X變大，斜邊不變（半徑），那么鄰邊（上圖中ON線段）   是會(huì)變小的;

　　270度的正統(tǒng)值，是負(fù)1;

　　180的余弦值是，是負(fù)1;

5.1 先設(shè)定一個(gè)圓

　　半徑：200px;

5.2 平均這個(gè)圓的圓周

　　假設(shè)我們有8個(gè)DIV 要平均分布在這個(gè)半徑為200PX的圓周上面。那么這里我們通過(guò)角度去平均（弧線的劃分也好，平均也好，冒似都應(yīng)該通過(guò)角度去劃分）;

　　平均：圓形的圓心角的總角度為360度，平均成8份，就是360/8; 這樣平分后的每一個(gè)圓心角，所對(duì)的弧長(zhǎng)，弧度，就都是相等的。

5.3 求出NG的長(zhǎng)度值，也就是DIV的left值，即紅點(diǎn)的橫坐標(biāo)值;

　　求這個(gè)值，要用到正弦函數(shù);

　　公式 Math.sin（X） =  對(duì)邊/斜邊; 

　　我們需要知道X，需要知到斜邊;就可以求出“對(duì)邊”值，即NG的長(zhǎng)度值;

　　5.3.1 這里的X是弧度，即角度數(shù);上面定義中說(shuō)過(guò)，弧度數(shù)是表示角度數(shù)的;

　　　　　　根據(jù)公式: 角度數(shù)乘以 PI/180,就是弧度數(shù); 即 X = (360/8)* PI/180

　　　　　　這個(gè)求出的X就是把圓形平分之后，的弧度數(shù);

　　5.3.2 斜邊，就是這個(gè)圓形的半徑，即 200;

　　5.3.3 “對(duì)邊”值，即NG的長(zhǎng)度值;

　　　　　  根據(jù)上面的公式變形：對(duì)邊（NG ） = Math.sin（X）*斜邊

　　　　　　即 ：對(duì)邊（NG ）=  Math.sin（X）* 200 = Math.sin（ (360/8)* PI/180 ）* 200;

　　好了，現(xiàn)在把對(duì)邊（NG ）的值求出來(lái)了;也就是紅點(diǎn)的橫坐標(biāo)值，即DVI的LEFT值;

5.4 求出每一個(gè)圓心角對(duì)應(yīng)的直角邊，即對(duì)邊的長(zhǎng)度值

　　因?yàn)槊恳粋€(gè)圓心角，都是均分的，所以乘以一個(gè)倍數(shù)，就得到不周圓心角對(duì)應(yīng)的弧度值，即角度值

　　這里用DIV的索引為倍數(shù)，值乘以X，就得到每個(gè)均分后，每個(gè)圓心角的弧度值;

　　對(duì)邊 =  Math.sin（X*索引）* 200;

　　用這個(gè)求出的【對(duì)邊】值 做為DIV的left值;

5.5 DIV的TOP值，即ON線段的長(zhǎng)度值

　　以上面四點(diǎn)的原理一樣，只不過(guò)把正弦值，改為余弦值

　　鄰邊（ON） = Math.COS（X*索引）* 200;

　　把這個(gè)值設(shè)為 DIV的TOP值;

根據(jù)以上分析：代碼如下，就可以按一個(gè)圓形，來(lái)排列DIV

//半徑
 var radius = 200;
 //每一個(gè)BOX對(duì)應(yīng)的角度;
 var avd = 360/$(".box").length;
 //每一個(gè)BOX對(duì)應(yīng)的弧度;
 var ahd = avd*Math.PI/180;
 

 $(".box").each(function(index, element){
 $(this).css({"left":Math.sin((ahd*index))*radius,"top":Math.cos((ahd*index))*radius});
 });

5.6 設(shè)置這個(gè)圓形的位置

　　圓形的位置，是根據(jù)這個(gè)圓形的圓心坐標(biāo)來(lái)定的，所以我們就是要設(shè)置，圓心的坐標(biāo)值，left top

　　圓心的坐標(biāo)坐變化了，那么對(duì)應(yīng)DIV的left top也應(yīng)該改變;

　　比如圓心的left :100PX ; TOP：100px;

　　那么每個(gè)DIV的LEFT和TOP也應(yīng)該加上這個(gè)值：

代碼如下

$(function(){
 //中心點(diǎn)橫坐標(biāo)
 var dotLeft = ($(".container").width()-$(".dot").width())/2;
 //中心點(diǎn)縱坐標(biāo)
 var dotTop = ($(".container").height()-$(".dot").height())/2;
 //起始角度
 var stard = 0;
 //半徑
 var radius = 200;
 //每一個(gè)BOX對(duì)應(yīng)的角度;
 var avd = 360/$(".box").length;
 //每一個(gè)BOX對(duì)應(yīng)的弧度;
 var ahd = avd*Math.PI/180; 
 //設(shè)置圓的中心點(diǎn)的位置
 $(".dot").css({"left":dotLeft,"top":dotTop});
 $(".box").each(function(index, element){
 $(this).css({"left":Math.sin((ahd*index))*radius+dotLeft,"top":Math.cos((ahd*index))*radius+dotTop});
 });
 })

六 總結(jié)：

　　6.1 在涉及到曲線或弧線的時(shí)候，應(yīng)該用角度或弧度去分析，找關(guān)聯(lián);

　　6.2 找關(guān)系或比例，讓值和值之間是一個(gè)關(guān)系式，會(huì)用到乘以或除以一個(gè)倍數(shù);( 例如以前寫(xiě)過(guò)的放大鏡，就是用比例關(guān)系);

七 先前的理解有誤，現(xiàn)在更新了分析的圖片和分析;感謝 “ 弦”！的提示~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家有所幫助，有興趣的朋友可以看下《基于javascript實(shí)現(xiàn)按圓形排列DIV元素(二)》和《基于javascript實(shí)現(xiàn)按圓形排列DIV元素(三)》，謝謝對(duì)腳本之家的支持！

最新評(píng)論