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

//半径 var radius = 200; //每一个BOX对应的角度; var avd = 360/$(".box").length; //每一个BOX对应的弧度; var ahd = avd*Math.PI/180; $(".box").each(function(index, element){ $(this).css({"left":Math.sin((ahd*index))*radius,"top":Math.cos((ahd*index))*radius}); });

5.6 设置这个圆形的位置

　　圆形的位置，是根据这个圆形的圆心坐标来定的，所以我们就是要设置，圆心的坐标值，left top

　　圆心的坐标坐变化了，那么对应DIV的left top也应该改变;

　　比如圆心的left :100PX ; TOP：100px;

　　那么每个DIV的LEFT和TOP也应该加上这个值：

代码如下

$(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; //设置圆的中心点的位置 $(".dot").css({"left":dotLeft,"top":dotTop}); $(".box").each(function(index, element){ $(this).css({"left":Math.sin((ahd*index))*radius+dotLeft,"top":Math.cos((ahd*index))*radius+dotTop}); }); })

六 总结：

　　6.1 在涉及到曲线或弧线的时候，应该用角度或弧度去分析，找关联;

　　6.2 找关系或比例，让值和值之间是一个关系式，会用到乘以或除以一个倍数;( 例如以前写过的放大镜，就是用比例关系);

七 先前的理解有误，现在更新了分析的图片和分析;感谢 “ 弦”！的提示~

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

您可能感兴趣的文章: