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


Posted in Javascript onDecember 02, 2016

一、原理分析

1.1怎么才能让DIV元素动起来?

动起来的实质,就是改变DIV的位置,也就是改变其left和top值;

  2.2怎么上DIV元素动起来的时候,是在规定的圆周上面?

通过上一次的分析,让DIV按圆形排队,我们知道了,如要让DIV定位在圆周上面,主要是根据角度(弧度)来实现的。

看下图:

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

上图中,我们B元素和C元素的定位是如何实现的?根据上一次讲的公式,如下:

(index:元素的索引值,radius半径,dotLeft:圆心的横坐标,dotTop:圆心的纵坐标)

B的left = Math.sin((ahd*Bindex))*radius+dotLeft
B的top = Math.cos((ahd*Bindex))*radius+dotTop
C的left = Math.sin((ahd*Cindex))*radius+dotLeft
C的top = Math.cos((ahd*Cindex))*radius+dotTop

从公式中可以看出,都一样,只是B和C的index,即索引值不一样,从而让角度(弧度)数不一样,结果就是正弦和余弦的值不一样,所以定位也就不一样了,但结果都是在这个圆周上变化。不会跑离这个圆周;

如果我现在想让B元素,定位到C元素的位置,该怎么做呢?

就是让B元素的角度(弧度)和C元素的一样,然后,套用上面的公式,就可以了。

B元素的现在的用的圆心角,是AOB,C元素用的圆心角,是AOC;  B元素和C元素之间相差了上图中BOC这个角度(弧度)值,也就是两个蓝色线条之间的角度(弧度);

得出结论:改变角度(弧度)就可以让元素在圆周上改变位置;

二、实例分析

根据上面的分析,我们已经知道如何在圆周上,改变DIV的位了;现在我们要做的就是怎么去改变才能让元素看起来是在运动?

是“速度”;有运动就会有速度

速度就是在规定时间内移动的距离:速度 = 距离/时间

速度太快就是“瞬间移动”让B移动到C;

速度慢,就可以看到B一点点向C的位置移动;

时间:在Javascript里的时间:就是用的setInterval(....,时间) 

例如:setInterval(移动,1000)  我们规定间隔1000毫秒,让元素做移动。

在本例中的移动:就是改变DVI的left和TOP值,而要改变这个值,需要用到上面的圆周上移动的公式;

速度:设一个速度 speed = 5;

这里的5,就是角度,即让圆心角,每1000毫秒,变化5度。

speed =  speed*Math.PI/180;将这个变化的角度转换成弧度,因为Math.sin只接受弧度单位的参数;

得出:

function 移动(){
speed ++

left = Math.sin((ahd*Bindex+speed ))*radius+dotLeft;

Math.cos((ahd*Bindex+speed))*radius+dotTop
}

三、实现代码:

$(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;
 //运动的速度
 var speed = 2;
 //设置圆的中心点的位置
 $(".dot").css({"left":dotLeft,"top":dotTop});
 //设置DIV圆形排列
 $(".box").each(function(index, element){
 $(this).css({"left":Math.sin((ahd*index))*radius+dotLeft,"top":Math.cos((ahd*index))*radius+dotTop});
 });
 //运动函数
 var fun_animat = function(){ 
 speed = speed<360?speed:2; 
 //运运的速度
 speed+=2;
 //运动距离,即运动的弧度数;
 var ainhd = speed*Math.PI/180; 
 //按速度来定位DIV元素
 $(".box").each(function(index, element){
 $(this).css({"left":Math.sin((ahd*index+ainhd))*radius+dotLeft,"top":Math.cos((ahd*index+ainhd))*radius+dotTop});
 });
 }
 //定时调用运动函数
 var setAnimate = setInterval(fun_animat,100);
 })

    其实也可以反过来思考,即每1000毫秒,我们获得圆周上的一个坐标点,将这个点的left和TOP值,赋给,需要改变位置,即运动的DIV元素!~~

以上就是本文的全部内容,希望对大家有所帮助,有兴趣的朋友可以参考文章《基于javascript实现按圆形排列DIV元素(一)》和《基于javascript实现按圆形排列DIV元素(三)》,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 #Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 #Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 #Javascript
关于Function中的bind()示例详解
Dec 02 #Javascript
bootstrap模态框消失问题的解决方法
Dec 02 #Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 #Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 #Javascript
You might like
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
js 调用父窗口的具体实现代码
2013/07/15 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
python实现倒计时小工具
2019/07/29 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
解决Python使用列表副本的问题
2019/12/19 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
神路信息Java面试题目
2013/03/31 面试题
C/C++有关内存的思考题
2015/12/04 面试题
复核员上岗演讲稿
2014/01/05 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
先进工作者申报材料
2014/12/23 职场文书
新生入学欢迎词
2015/01/26 职场文书
索赔员岗位职责
2015/02/15 职场文书
加薪申请报告范本
2015/05/15 职场文书