基于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的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
新手入门js闭包学习过程解析
Oct 08 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 安全检测代码片段(分享)
2013/07/05 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
php实现的通用图片处理类
2015/03/24 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
php算法实例分享
2015/07/14 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
php实现简单加入购物车功能
2017/03/07 PHP
用js来解决ajax读取页面乱码
2010/11/28 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
深入浅析Python字符编码
2015/11/12 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
财务人员个人求职信范文
2013/12/04 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
综治目标管理责任书
2015/05/11 职场文书
故意杀人案辩护词
2015/05/21 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
Redis主从复制操作和配置详情
2022/09/23 Redis