基于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扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
详解js实时获取并显示当前时间的方法
May 10 Javascript
vue cli3适配所有端方案的实现
Apr 13 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
PHP6 mysql连接方式说明
2009/02/09 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
过虑特殊字符输入的js代码
2010/08/05 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
js变换显示图片的实例
2013/04/16 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
微信小程序 出现错误:{"baseresponse":{"errcode":-80002,"errmsg":""}}解决办法
2017/02/23 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
服务行业演讲稿
2014/09/02 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
家属答谢词
2015/01/05 职场文书