基于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 相关文章推荐
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
php 的反射详解及示例代码
2016/08/25 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
javascript 一些用法小结
2009/09/11 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
小程序实现搜索框
2020/06/19 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
python django 实现验证码的功能实例代码
2017/05/18 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
Python I/O与进程的详细讲解
2019/03/08 Python
简单了解django orm中介模型
2019/07/30 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
python实现低通滤波器代码
2020/02/26 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
灵泰克Java笔试题
2016/01/09 面试题
党支部书记先进事迹
2014/01/17 职场文书
优秀食品类广告词
2014/03/19 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
党校培训学习心得体会
2016/01/06 职场文书
优质护理心得体会
2016/01/22 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs