本文详解如何利用JavaScript结合三角函数实现DIV元素沿圆周排列及运动。通过解析圆心角、半径与坐标的关系，利用setInterval控制速度，动态改变元素的left和top值，实现平滑的圆周运动效果。
圆周运动原理分析
一、原理分析
1.1 如何让DIV元素产生运动效果？
运动的本质在于改变DIV元素在页面中的位置，具体表现为更新其CSS样式中的left和top属性值；
2.2 如何确保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毫秒，让元素在此时间间隔内执行移动操作。
在本例中，“移动”的具体含义是更新DIV的left和top值，而计算这些值需要用到前文提到的圆周运动公式；
设定速度变量：speed = 5；
这里的数值5代表角度增量，即每1000毫秒，圆心角变化5度。
执行代码：speed = speed * Math.PI / 180；将变化的角度转换为弧度，因为Math.sin和Math.cos函数仅接受弧度单位的参数；
由此得出运动逻辑：
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元素(三)》，谢谢对本站的支持！