当前位置：首页 > 资讯 > 技术文档

基于javascript实现按圆形排列DIV元素(二)

时间：2022-09-22 02:09 编辑：来源：阅读：
扫一扫，手机访问

摘要：基于javascript实现按圆形排列DIV元素(二)

[b]一、原理分析[/b] 　　[b]1.1怎么才能让DIV元素动起来？[/b] 　　动起来的实质，就是改变DIV的位置，也就是改变其left和top值; 　[b]　2.2怎么上DIV元素动起来的时候，是在规定的圆周上面？[/b] 　　通过上一次的分析，让DIV按圆形排队，我们知道了，如要让DIV定位在圆周上面，主要是根据角度(弧度)来实现的。　　看下图: [img]http://files.jb51.net/file_images/article/201612/201612294444879.gif?20161129459[/img] [b]上图中，我们B元素和C元素的定位是如何实现的？根据上一次讲的公式,如下：[/b] (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]如果我现在想让B元素，定位到C元素的位置，该怎么做呢？[/b] 就是让B元素的角度（弧度）和C元素的一样，然后，套用上面的公式，就可以了。 B元素的现在的用的圆心角，是AOB，C元素用的圆心角，是AOC; B元素和C元素之间相差了上图中BOC这个角度（弧度）值，也就是两个蓝色线条之间的角度（弧度）; [b]得出结论：改变角度（弧度）就可以让元素在圆周上改变位置;[/b] [b]二、实例分析[/b] 根据上面的分析，我们已经知道如何在圆周上，改变DIV的位了;现在我们要做的就是怎么去改变才能让元素看起来是在运动？ [b]是“速度”;有运动就会有速度[/b] 速度就是在规定时间内移动的距离：速度 = 距离/时间速度太快就是“瞬间移动”让B移动到C; 速度慢，就可以看到B一点点向C的位置移动; [b]时间：[/b]在Javascript里的时间：就是用的setInterval(....,时间) 例如：setInterval(移动,1000) 我们规定间隔1000毫秒，让元素做移动。在本例中的移动：就是改变DVI的left和TOP值，而要改变这个值，需要用到上面的圆周上移动的公式; [b]速度：[/b]设一个速度 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
}

[b]三、实现代码：[/b]

$(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元素！~~ 以上就是本文的全部内容，希望对大家有所帮助，有兴趣的朋友可以参考文章[url=http://www.1sucai.cn/article/98840.htm]《基于javascript实现按圆形排列DIV元素(一)》[/url]和[url=http://www.1sucai.cn/article/98854.htm]《基于javascript实现按圆形排列DIV元素(三)》[/url]，谢谢对编程素材网的支持！

全部评论(0)

上一篇：Javascript中call与apply的学习笔记
下一篇：Javascript别踩白块儿（钢琴块儿）小游戏实现代码

资讯排行榜
更多>>