一、原理分析

　　1.1怎么才能讓DIV元素動(dòng)起來？

　　動(dòng)起來的實(shí)質(zhì)，就是改變DIV的位置，也就是改變其left和top值;

　　2.2怎么上DIV元素動(dòng)起來的時(shí)候，是在規(guī)定的圓周上面？

　　通過上一次的分析，讓DIV按圓形排隊(duì)，我們知道了，如要讓DIV定位在圓周上面，主要是根據(jù)角度(弧度)來實(shí)現(xiàn)的。

　　看下圖:

上圖中，我們B元素和C元素的定位是如何實(shí)現(xiàn)的？根據(jù)上一次講的公式,如下：

(index:元素的索引值，radius半徑，dotLeft：圓心的橫坐標(biāo)，dotTop：圓心的縱坐標(biāo))

B的left = Math.sin((ahd*Bindex))*radius+dotLeft
B的top = Math.cos((ahd*Bindex))*radius+dotTop
C的left = Math.sin((ahd*Cindex))*radius+dotLeft
C的top = Math.cos((ahd*Cindex))*radius+dotTop

從公式中可以看出，都一樣，只是B和C的index，即索引值不一樣，從而讓角度（弧度）數(shù)不一樣，結(jié)果就是正弦和余弦的值不一樣，所以定位也就不一樣了，但結(jié)果都是在這個(gè)圓周上變化。不會(huì)跑離這個(gè)圓周;

如果我現(xiàn)在想讓B元素，定位到C元素的位置，該怎么做呢？

就是讓B元素的角度（弧度）和C元素的一樣，然后，套用上面的公式，就可以了。

B元素的現(xiàn)在的用的圓心角，是AOB，C元素用的圓心角，是AOC;  B元素和C元素之間相差了上圖中BOC這個(gè)角度（弧度）值，也就是兩個(gè)藍(lán)色線條之間的角度（弧度）;

得出結(jié)論：改變角度（弧度）就可以讓元素在圓周上改變位置;

二、實(shí)例分析

根據(jù)上面的分析，我們已經(jīng)知道如何在圓周上，改變DIV的位了;現(xiàn)在我們要做的就是怎么去改變才能讓元素看起來是在運(yùn)動(dòng)？

是“速度”;有運(yùn)動(dòng)就會(huì)有速度

速度就是在規(guī)定時(shí)間內(nèi)移動(dòng)的距離：速度 = 距離/時(shí)間

速度太快就是“瞬間移動(dòng)”讓B移動(dòng)到C;

速度慢，就可以看到B一點(diǎn)點(diǎn)向C的位置移動(dòng);

時(shí)間：在Javascript里的時(shí)間：就是用的setInterval(....,時(shí)間) 

例如：setInterval(移動(dòng),1000)  我們規(guī)定間隔1000毫秒，讓元素做移動(dòng)。

在本例中的移動(dòng)：就是改變DVI的left和TOP值，而要改變這個(gè)值，需要用到上面的圓周上移動(dòng)的公式;

速度：設(shè)一個(gè)速度 speed = 5;

這里的5，就是角度，即讓圓心角，每1000毫秒，變化5度。

speed =  speed*Math.PI/180;將這個(gè)變化的角度轉(zhuǎn)換成弧度，因?yàn)镸ath.sin只接受弧度單位的參數(shù);

得出：

function 移動(dòng)(){
　　speed ++
　　left = Math.sin((ahd*Bindex+speed ))*radius+dotLeft;
　　Math.cos((ahd*Bindex+speed))*radius+dotTop
}

三、實(shí)現(xiàn)代碼：

$(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;
 //運(yùn)動(dòng)的速度
 var speed = 2;
 //設(shè)置圓的中心點(diǎn)的位置
 $(".dot").css({"left":dotLeft,"top":dotTop});
 //設(shè)置DIV圓形排列
 $(".box").each(function(index, element){
 $(this).css({"left":Math.sin((ahd*index))*radius+dotLeft,"top":Math.cos((ahd*index))*radius+dotTop});
 });
 //運(yùn)動(dòng)函數(shù)
 var fun_animat = function(){ 
 speed = speed<360?speed:2; 
 //運(yùn)運(yùn)的速度
 speed+=2;
 //運(yùn)動(dòng)距離，即運(yùn)動(dòng)的弧度數(shù);
 var ainhd = speed*Math.PI/180; 
 //按速度來定位DIV元素
 $(".box").each(function(index, element){
 $(this).css({"left":Math.sin((ahd*index+ainhd))*radius+dotLeft,"top":Math.cos((ahd*index+ainhd))*radius+dotTop});
 });
 }
 //定時(shí)調(diào)用運(yùn)動(dòng)函數(shù)
 var setAnimate = setInterval(fun_animat,100);
 })

    其實(shí)也可以反過來思考，即每1000毫秒，我們獲得圓周上的一個(gè)坐標(biāo)點(diǎn)，將這個(gè)點(diǎn)的left和TOP值，賦給，需要改變位置，即運(yùn)動(dòng)的DIV元素！~~

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

最新評(píng)論