基于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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
jquery获取tagName再进行判断
May 29 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
js评分组件使用详解
Jun 06 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
JS控制GIF图片的停止与显示
Oct 24 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 代码优化的42条建议 推荐
2009/09/25 PHP
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
JS event使用方法详解
2008/04/28 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
JS实现点击事件统计的简单实例
2016/07/10 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
python中bisect模块用法实例
2014/09/25 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
Python实现二分查找算法实例
2015/05/26 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
先进集体获奖感言
2014/02/13 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
使用HttpSessionListener监听器实战
2022/03/17 Java/Android