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


Posted in Javascript onDecember 02, 2016

效果图:

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

一、分析图:

绿色边框内:外层的DIV元素,相对定位;

白色圆形框:辅助分析的想象形状;

白点:为白色圆形的圆心点,中心点,点o;

圆心角:角NOG;

黄色:需要按圆形排列的,绝对定位的DIV元素;

红色点:为每个黄色DIV的坐标点;即绝对定位时的元素,left值 和 top值 ,设置的点;

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

二、涉及到的概念定义:

2.1、弧度:弧度是角的度量单位

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

(红色部分为弧长,角A为弧长对应的圆心角)

弧长等于半径的弧,其所对的圆心角为1弧度。(即两条射线从圆心向圆周射出,形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时,两条射线的夹角的弧度为1)。

根据定义,一周的弧度数为2πr/r=2π,360°角=2π弧度,因此,1弧度约为57.3°,即57°17'44.806'',1°为π/180弧度,近似值为0.01745弧度,周角为2π弧度,平角(即180°角)为π弧度,直角为π/2弧度。

弧长=n2πr/360  (在这里n就是角度数,即圆心角n所对应的弧长。)

========================================================

2.2、正弦值:弦值是在直角三角形中,对边的长比上斜边的长的值。

Math.sin(x) : X 必需。一个以弧度表示的角。将角度乘以 0.017453293 (2PI/360)即可转换为弧度。

================================================

2.3、余弦值:是指直角三角形锐角邻边与斜边的比值。

Math.sin(x) : X 必需。一个以弧度表示的角。将角度乘以 0.017453293 (2PI/360)即可转换为弧度。

三、需求分析:

3.1 让这些黄色的DIV ,在同一个圆的圆周上排列

3.2 排列的方式是平均分布

四、原理分析:

要让DIV的排列,形成一个圆形,实质就是设置每个DIV的left值  和 TOP值 之间的关系,让它们之间值的关系,按照圆形的规律去设值;

4.1 圆形的规律是什么?

是PI(圆周率);  任何值乘以这个PI再乘2,就可以得到一个圆形。这个“任何值”就是得到的圆形的半径;值越大,当然这个圆形也就越大。

4.2 怎么找到每个DIV的Left 和 TOP值之关系?

上图中的每个黄色DIV左上角的红色点的坐标,就是left 和 TOP值 ,要让这个红色的点,正好分布在这个圆周上面,那么Left 和 top 必然要和这个PI关联起来。有PI才有圆。

五、实例分析

我要得到上图中,红点的坐标值,即DIV的left 和 TOP值,

LEFT = NG +  o的横坐标值(left)

TOP = ON + or的纵坐标值(TOP)

所以先要求出每个一以圆心o为顶点,以圆形半径为斜边,的直角三角形的两个直角边的值。(上图中蓝色直角三角形的ON线段和NG线段的长度值)

以半边圆形来看,当圆心角变大,半径不变的情况下,这个底边的值,是会变大的;

正弦公式:sin(X) = 对边/斜边  X变大,斜边不变(半径),那么对边(上图中的NG线段)是会变大的;

余统公式  cos(X) = 邻边/斜边  X变大,斜边不变(半径),那么邻边(上图中ON线段)   是会变小的;

270度的正统值,是负1;

180的余弦值是,是负1;

5.1 先设定一个圆

半径:200px;

5.2 平均这个圆的圆周

假设我们有8个DIV 要平均分布在这个半径为200PX的圆周上面。那么这里我们通过角度去平均(弧线的划分也好,平均也好,冒似都应该通过角度去划分);

平均:圆形的圆心角的总角度为360度,平均成8份,就是360/8; 这样平分后的每一个圆心角,所对的弧长,弧度,就都是相等的。

5.3 求出NG的长度值,也就是DIV的left值,即红点的横坐标值;

求这个值,要用到正弦函数;

公式 Math.sin(X) =  对边/斜边; 

我们需要知道X,需要知到斜边;就可以求出“对边”值,即NG的长度值;

5.3.1 这里的X是弧度,即角度数;上面定义中说过,弧度数是表示角度数的;

根据公式: 角度数乘以 PI/180,就是弧度数; 即 X = (360/8)* PI/180

这个求出的X就是把圆形平分之后,的弧度数;

5.3.2 斜边,就是这个圆形的半径,即 200;

5.3.3 “对边”值,即NG的长度值;

   根据上面的公式变形:对边(NG ) = Math.sin(X)*斜边

即 :对边(NG )=  Math.sin(X)* 200 = Math.sin( (360/8)* PI/180 )* 200;

好了,现在把对边(NG )的值求出来了;也就是红点的横坐标值,即DVI的LEFT值;

5.4 求出每一个圆心角对应的直角边,即对边的长度值

因为每一个圆心角,都是均分的,所以乘以一个倍数,就得到不周圆心角对应的弧度值,即角度值

这里用DIV的索引为倍数,值乘以X,就得到每个均分后,每个圆心角的弧度值;

对边 =  Math.sin(X*索引)* 200;

用这个求出的【对边】值 做为DIV的left值;

5.5 DIV的TOP值,即ON线段的长度值

以上面四点的原理一样,只不过把正弦值,改为余弦值

邻边(ON) = Math.COS(X*索引)* 200;

把这个值设为 DIV的TOP值;

根据以上分析:代码如下,就可以按一个圆形,来排列DIV

//半径
 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元素(三)》,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
JavaScript入门之基本函数详解
Oct 21 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
javascript元素动态创建实现方法
May 13 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
vue如何截取字符串
May 06 Javascript
关于Function中的bind()示例详解
Dec 02 #Javascript
bootstrap模态框消失问题的解决方法
Dec 02 #Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 #Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 #Javascript
vue.js入门(3)——详解组件通信
Dec 02 #Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 #Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 #Javascript
You might like
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
python中的数据结构比较
2019/05/13 Python
python获取array中指定元素的示例
2019/11/26 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
python计算导数并绘图的实例
2020/02/29 Python
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
汽车运用工程专业求职信
2014/06/18 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
辞职信标准格式
2015/02/27 职场文书
岁月神偷观后感
2015/06/11 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery