當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
原生javascript 元素依次掉落及上升
生活随笔
收集整理的這篇文章主要介紹了
原生javascript 元素依次掉落及上升
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、實現原理：
① 通過onoff開關，判斷元素是往下走 還是往上走，并在每次清除定時器后，把onoff 設為 !onoff，以便下次點擊做判斷
②move函數的運用
二、代碼
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin:0;padding: 0;} div{position: absolute; width:40px; height:40px; background: red; top: 0} </style> </head> <body> <div></div><script type="text/javascript">window.onload = function(){var box = document.getElementsByTagName('div'); //動態獲取未來元素var len = 16;var str = '';var timer = null;var num = 0;var onoff = true; //點擊開關// 動態生成div標簽for (var i = 0; i < len; i++) {str += "<div style='left:"+(i*50)+"px;'></div>"}document.body.innerHTML = str;document.onclick = function(){// 清除定時器 clearInterval(timer);// 判斷往下還是往上if(onoff){// 開啟定時器，讓元素挨個往下掉 timer = setInterval(function(){move(box[num],'top',10,500);num++;// 當最后一個掉完，清除定時器，并把開關設為false，把num重置為0if(num == len){clearInterval(timer);onoff = !onoff;num = 0;}},100)}else{// 開啟定時器，讓元素挨個往上走 timer = setInterval(function(){move(box[num],'top',10,0);num++;// 當最后一個升完，清除定時器，并把開關設為true，把num重置為0if(num == len){clearInterval(timer);onoff = !onoff;num = 0;}},100)}}/*obj:要運動的元素attr:屬性dir:步長target:目標點endFn:回調函數*/function move(obj,attr,dir,target,endFn){//根據元素當前位置和目標點的比較，動態設置步長為正數或負數 dir = parseInt( getStyle(obj,attr) ) < target ? dir : -dir;// 1、清除定時器 clearInterval(obj.timer);// 2、設置定時器 obj.timer = setInterval(function(){// 3、獲取元素當前位置+步長var speed = parseInt( getStyle(obj,attr) ) + dir;// 4、如果元素當前位置超過目標點，則把當前位置==目標點if( speed > target && dir > 0 || speed < target && dir < 0){speed = target}// 5、設置元素位置 obj.style[attr] = speed + 'px';// 6、判斷是否到達目標點，如果到達則停止定時器if(speed == target){clearInterval(obj.timer);// 回調函數，如果endFn存在則執行 endFn && endFn();}},20)}/*獲取非行間樣式：標準瀏覽器下 getComputedStyle(obj)[attr]IE瀏覽器下 obj.currentStyle[attr]*/function getStyle(obj,attr){return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];}} </script> </body> </html>?
轉載于:https://www.cnblogs.com/javascripter/p/9856731.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的原生javascript 元素依次掉落及上升的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一步步学习webpack 1
- 下一篇： SpringBoot入门教程(十)应用监