基于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 相关文章推荐
JavaScript随机排序(随即出牌)
Sep 17 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
webpack4打包vue前端多页面项目
Sep 17 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 empty()与isset()区别的详细介绍
2013/06/17 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
javascript写的日历类(基于pj)
2010/12/28 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
vue如何判断dom的class
2018/04/26 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
python远程邮件控制电脑升级版
2019/05/23 Python
Python configparser模块应用过程解析
2020/08/14 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
python爬取youtube视频的示例代码
2021/03/03 Python
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
小学教师的自我评价范例
2013/10/31 职场文书
出国导师推荐信
2014/01/16 职场文书
医生进修自我鉴定
2014/01/19 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
企业员工集体活动方案
2014/08/17 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
史上最牛的辞职信
2015/02/28 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python