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

 更新时间:2016年12月02日 09:47:54   作者:船长op  
本篇文章主要介绍基于javascript实现按圆形排列DIV元素的方法,此文着重于介绍怎样实现的按圆形排列DIV元素的运动原理和实现效果代码,需要的朋友来看下吧

一、原理分析

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

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

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

  通过上一次的分析,让DIV按圆形排队,我们知道了,如要让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打印网页指定区域的例子

    这篇文章主要介绍了JavaScript打印网页指定区域的例子,需要的朋友可以参考下
    2014-05-05
  • layer.js之回调销毁对话框的例子

    layer.js之回调销毁对话框的例子

    今天小编就为大家分享一篇layer.js之回调销毁对话框的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 详解CocosCreator系统事件是怎么产生及触发的

    详解CocosCreator系统事件是怎么产生及触发的

    这篇文章主要介绍了CocosCreator系统事件是怎么产生及触发的,虽然内容不少,但是只要一点点抽丝剥茧,具体分析其内容,就会豁然开朗
    2021-04-04
  • javascript重复绑定事件造成的后果说明

    javascript重复绑定事件造成的后果说明

    最近在修改百度地图开源的东西,想把里面耦合在一起的代码给拆分出来。拆解之后,发现了一些坑爹的问题。逻辑上没有问题的情况下,该出现的效果没有出现
    2013-03-03
  • javascript中异常处理案例(推荐)

    javascript中异常处理案例(推荐)

    下面小编就为大家带来一篇javascript中异常处理案例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JavaScript 注册事件代码

    JavaScript 注册事件代码

    最基本的写法 ,然后实现Js和HTML的分离,然后又实现对同一个元素注册多个事件,期间,我们发现注册事件的兼容性问题。最后我们对注册事件的方法进行封装,方便以后使用。
    2011-01-01
  • 基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例

    基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例

    这篇文章主要介绍了基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JavaScript滚动条属性scrollTop和scrollHeight

    JavaScript滚动条属性scrollTop和scrollHeight

    在开发中我们常常会用到判断滚动条是否触底的逻辑,我一般都会在网上搜一段代码,这段代码有用到scrollTop、clientHeight、 scrollHeight,这篇文章主要给大家介绍了关于JavaScript滚动条属性scrollTop和scrollHeight的相关资料,需要的朋友可以参考下
    2023-11-11
  • mustache.js实现首页元件动态渲染的示例代码

    mustache.js实现首页元件动态渲染的示例代码

    这篇文章主要介绍了mustache.js实现首页元件动态渲染的示例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • js控制台输出的方法(详解)

    js控制台输出的方法(详解)

    下面小编就为大家带来一篇js控制台输出的方法(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11

最新评论