基于javascript将DIV元素排列成圆形(2)

一、原理分析

1.1如何让DIV元素移动？

移动的本质是改变DIV的位置，即改变其左、顶值；

2.2如何在指定圆周上移动DIV元素？

通过最后一个分析，让div按照圆排好，我们知道如果要在圆上定位div，主要是按照角度(弧度)来实现的。

看下图：

上图中，我们是如何实现B元素和C元素的定位的？根据上次提到的公式，如下所示：

(index:元素的索引值，半径半径，dotLeft:中心横坐标，dotTop:中心纵坐标)

b的左边=math.sin ((ahd * b index)) *半径dotleftb的顶部=math.cos ((ahd * b index)) *半径dottopc的左边=math.sin ((ahd * cindex)) *半径dotLeftC的顶部=math.cos ((ahd * cindex)) *半径dottop从公式中可以看出，它们都是相同的，只是b和c的索引值不同，这使得角度(弧度)的数量不同，导致正弦和余弦的值不同，所以不会逃离这个圈子；

如果我想让B元素现在位于C元素的位置，我应该怎么做？

设B元素的角度(弧度)与C元素的角度(弧度)相同，然后应用上述公式。

B元素当前的中心角为AOB，C元素的中心角为AOC元素B和元素C的区别是上图中行的角度(弧度)值，即两条蓝线之间的角度(弧度)；

得出改变角度(弧度)可以改变元素在圆周上的位置；

二、案例分析

根据上面的分析，我们已经知道如何改变圆周上DIV的位；现在，我们要做的是如何改变，让元素看起来像是在运动。

就是“速度”；有运动，就有速度

速度是在指定时间内移动的距离：速度=距离/时间

如果速度太快，让B移动到C就是“瞬间移动”；

速度慢的时候，可以看到B稍微向C的位置移动；

时间：在Javascript中，时间是setInterval(.时间)

例如：设置间隔(移动，1000)我们为元素移动指定一个1000毫秒的间隔。

在这个例子中移动：改变DVI的左、TOP值，要改变这个值，需要使用上面的绕圈移动公式；

速度：设置一个速度速度=5；

这里，5是角度，即让中心角每1000毫秒改变5度。

速度=速度*数学。PI/180；将此变化的角度转换为弧度，因为Math.sin只接受弧度参数；

来到：

函数move(){ speed left=math . sin((ahd * b索引速度))* radius dotleftMath.cos ((ahd * b索引速度))*半径dottop} iii。实现代码：

$(function(){ //横坐标vardotleft=($(')。容器')。width ()-$('。点')。width())/2；//中心点纵坐标vardottop=($(')。容器')。height ()-$('。点')。高度())/2；//起始角度var star=0；//半径var半径=200；//每个BOX对应的角度；var avd=360/$('。方框')。长度；//每个BOX对应的弧度；var ahd=avd *数学。PI/180；//运动速度var speed=2；//设置圆$('的中心点位置。点')。CSS({ ' left ' : dottleft，' top ' : dottop })；//设置DIV循环排列$('。方框')。每个(函数(索引，元素){$ (this))。CSS({ ' left ' : path . sin((ahd * index))* radius dot left，' top ' : path . cos((ahd)})；//运动函数varfun _ animat=function(){ speed=speed 360？速度：2；//运输速度的速度=2；//运动距离，即运动的弧度数；var ainhd=速度*数学。PI/180；//定位DIV元素$('。方框')。每个(函数(索引，元素){$ (this))。CSS({ ' left ' : math . sin((ahd * index ain HD))* radius dot left，' top ' : math . cos(()})；}//定期调用运动函数var设置动画=setinterval (fun _ animation，100)；})其实我们可以反过来想，就是每1000毫秒，我们在圆周上得到一个坐标点，把这个点的左、TOP值赋给需要改变位置的DIV元素，也就是移动！~~

以上就是本文的全部内容，希望对大家有所帮助。感兴趣的朋友可以参考文章《基于javascript实现按圆形排列DIV元素(一)》和《基于javascript实现按圆形排列DIV元素(三)》。感谢大家的支持！