亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

基于javascript實現按圓形排列DIV元素(二)

 更新時間:2016年12月02日 09:47:54   作者:船長op  
本篇文章主要介紹基于javascript實現按圓形排列DIV元素的方法,此文著重于介紹怎樣實現的按圓形排列DIV元素的運動原理和實現效果代碼,需要的朋友來看下吧

一、原理分析

  1.1怎么才能讓DIV元素動起來?

  動起來的實質,就是改變DIV的位置,也就是改變其left和top值;

  2.2怎么上DIV元素動起來的時候,是在規(guī)定的圓周上面?

  通過上一次的分析,讓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的位了;現在我們要做的就是怎么去改變才能讓元素看起來是在運動?

是“速度”;有運動就會有速度

速度就是在規(guī)定時間內移動的距離:速度 = 距離/時間

速度太快就是“瞬間移動”讓B移動到C;

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

時間:在Javascript里的時間:就是用的setInterval(....,時間) 

例如:setInterval(移動,1000)  我們規(guī)定間隔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打印網頁指定區(qū)域的例子

    JavaScript打印網頁指定區(qū)域的例子

    這篇文章主要介紹了JavaScript打印網頁指定區(qū)域的例子,需要的朋友可以參考下
    2014-05-05
  • layer.js之回調銷毀對話框的例子

    layer.js之回調銷毀對話框的例子

    今天小編就為大家分享一篇layer.js之回調銷毀對話框的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 詳解CocosCreator系統(tǒng)事件是怎么產生及觸發(fā)的

    詳解CocosCreator系統(tǒng)事件是怎么產生及觸發(fā)的

    這篇文章主要介紹了CocosCreator系統(tǒng)事件是怎么產生及觸發(fā)的,雖然內容不少,但是只要一點點抽絲剝繭,具體分析其內容,就會豁然開朗
    2021-04-04
  • javascript重復綁定事件造成的后果說明

    javascript重復綁定事件造成的后果說明

    最近在修改百度地圖開源的東西,想把里面耦合在一起的代碼給拆分出來。拆解之后,發(fā)現了一些坑爹的問題。邏輯上沒有問題的情況下,該出現的效果沒有出現
    2013-03-03
  • javascript中異常處理案例(推薦)

    javascript中異常處理案例(推薦)

    下面小編就為大家?guī)硪黄猨avascript中異常處理案例(推薦)。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-10
  • JavaScript 注冊事件代碼

    JavaScript 注冊事件代碼

    最基本的寫法 ,然后實現Js和HTML的分離,然后又實現對同一個元素注冊多個事件,期間,我們發(fā)現注冊事件的兼容性問題。最后我們對注冊事件的方法進行封裝,方便以后使用。
    2011-01-01
  • 基于JS抓取某高校附近共享單車位置 使用web方式展示位置變化代碼實例

    基于JS抓取某高校附近共享單車位置 使用web方式展示位置變化代碼實例

    這篇文章主要介紹了基于JS抓取某高校附近共享單車位置 使用web方式展示位置變化代碼實例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-08-08
  • JavaScript滾動條屬性scrollTop和scrollHeight

    JavaScript滾動條屬性scrollTop和scrollHeight

    在開發(fā)中我們常常會用到判斷滾動條是否觸底的邏輯,我一般都會在網上搜一段代碼,這段代碼有用到scrollTop、clientHeight、 scrollHeight,這篇文章主要給大家介紹了關于JavaScript滾動條屬性scrollTop和scrollHeight的相關資料,需要的朋友可以參考下
    2023-11-11
  • mustache.js實現首頁元件動態(tài)渲染的示例代碼

    mustache.js實現首頁元件動態(tài)渲染的示例代碼

    這篇文章主要介紹了mustache.js實現首頁元件動態(tài)渲染的示例代碼,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-12-12
  • js控制臺輸出的方法(詳解)

    js控制臺輸出的方法(詳解)

    下面小編就為大家?guī)硪黄猨s控制臺輸出的方法(詳解)。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-11-11

最新評論