一、原理分析
1.1怎么才能让DIV元素动起来?
动起来的实质,就是改变DIV的位置,也就是改变其left和top值;
2.2怎么上DIV元素动起来的时候,是在规定的圆周上面?
通过上一次的分析,让DIV按圆形排队,我们知道了,如要让DIV定位在圆周上面,主要是根据角度(弧度)来实现的。
看下图:
上图中,我们B元素和C元素的定位是如何实现的?根据上一次讲的公式,如下:
(index:元素的索引值,radius半径,dotLeft:圆心的横坐标,dotTop:圆心的纵坐标)
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,即索引值不一样,从而让角度(弧度)数不一样,结果就是正弦和余弦的值不一样,所以定位也就不一样了,但结果都是在这个圆周上变化。不会跑离这个圆周;
如果我现在想让B元素,定位到C元素的位置,该怎么做呢?
就是让B元素的角度(弧度)和C元素的一样,然后,套用上面的公式,就可以了。
B元素的现在的用的圆心角,是AOB,C元素用的圆心角,是AOC; B元素和C元素之间相差了上图中BOC这个角度(弧度)值,也就是两个蓝色线条之间的角度(弧度);
得出结论:改变角度(弧度)就可以让元素在圆周上改变位置;
二、实例分析
根据上面的分析,我们已经知道如何在圆周上,改变DIV的位了;现在我们要做的就是怎么去改变才能让元素看起来是在运动?
是“速度”;有运动就会有速度
速度就是在规定时间内移动的距离:速度 = 距离/时间
速度太快就是“瞬间移动”让B移动到C;
速度慢,就可以看到B一点点向C的位置移动;
时间:在Javascript里的时间:就是用的setInterval(....,时间)
例如:setInterval(移动,1000) 我们规定间隔1000毫秒,让元素做移动。
在本例中的移动:就是改变DVI的left和TOP值,而要改变这个值,需要用到上面的圆周上移动的公式;
速度:设一个速度 speed = 5;
这里的5,就是角度,即让圆心角,每1000毫秒,变化5度。
speed = speed*Math.PI/180;将这个变化的角度转换成弧度,因为Math.sin只接受弧度单位的参数;
得出:
function 移动(){ speed ++ left = Math.sin((ahd*Bindex+speed ))*radius+dotLeft; Math.cos((ahd*Bindex+speed))*radius+dotTop }
三、实现代码:
$(function(){ //中心点横坐标 var dotLeft = ($(".container").width()-$(".dot").width())/2; //中心点纵坐标 var dotTop = ($(".container").height()-$(".dot").height())/2; //起始角度 var stard = 0; //半径 var radius = 200; //每一个BOX对应的角度; var avd = 360/$(".box").length; //每一个BOX对应的弧度; var ahd = avd*Math.PI/180; //运动的速度 var speed = 2; //设置圆的中心点的位置 $(".dot").css({"left":dotLeft,"top":dotTop}); //设置DIV圆形排列 $(".box").each(function(index, element){ $(this).css({"left":Math.sin((ahd*index))*radius+dotLeft,"top":Math.cos((ahd*index))*radius+dotTop}); }); //运动函数 var fun_animat = function(){ speed = speed<360?speed:2; //运运的速度 speed+=2; //运动距离,即运动的弧度数; 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}); }); } //定时调用运动函数 var setAnimate = setInterval(fun_animat,100); })
其实也可以反过来思考,即每1000毫秒,我们获得圆周上的一个坐标点,将这个点的left和TOP值,赋给,需要改变位置,即运动的DIV元素!~~
以上就是本文的全部内容,希望对大家有所帮助,有兴趣的朋友可以参考文章《基于javascript实现按圆形排列DIV元素(一)》和《基于javascript实现按圆形排列DIV元素(三)》,谢谢对三水点靠木的支持!
基于javascript实现按圆形排列DIV元素(二)
- Author -
船长op声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@