基于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 相关文章推荐
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
纯js实现手风琴效果
Apr 17 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
Vue 3.0中jsx语法的使用
Nov 13 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远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
js replace正则表达式应用案例讲解
2013/01/17 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
js style动态设置table高度
2014/10/21 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
python处理cookie详解
2014/02/07 Python
python访问sqlserver示例
2014/02/10 Python
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
Python列表解析配合if else的方法
2018/06/23 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
关于python中的xpath解析定位
2020/03/06 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
售票员岗位职责
2015/02/15 职场文书