一排元素往下掉 【總結】
阿新 • • 發佈：2018-08-24
分析 ret get 否則 其中 adding 延遲 當前 tee
需求
點擊當前元素，看看是否有上個兄弟節點或者下個兄弟節點，
如果有，就讓他們依次下落（當前元素也會下落），否則就不用下落
需求分析：
可以用之前做的那個拿來改改，重新做個也不難，就是用js生成一下div，再根據數量以及點擊的位置一次向外延遲調用doMove函數
點擊其中一個div --- 被點擊的div不延遲 --- 左右向外擴展，每個都綁定doMove函數，每外一格延遲等於【延遲時長*i】 --- 當最後一個觸底才允許再次點擊，再次點擊往反方向跑
實現思路：
首先是向左向右找div，可以用previousSibling和nextSibling來查找，因為左右的div數量不可能每次都相等，所以用while，如果兩邊都找不到了就break，在每次循環中都給找到的兄弟元素綁定doMove並乘以 i 遞增延遲時長，這樣就實現依次下落的效果。再就是怎樣實現往復( 下降上升下降上升... )，如果只實現一個div就給這個div加個開關，現在是隨機點div，那就要給所有的div都加一個開關，並且doMove每個div後都要給開關取反，這樣就能實現往復跑的效果。還有就是禁止鼠標連擊，我的實現方法是，每次點擊都判斷，例如，有10個div，我點擊了第6個，那麽我需要等第0個到位後我才能再觸發一次函數，實現原理就是‘等’，等最後那個到位，到位後點擊才能觸發函數。
難點：
禁止連擊，還有如果以超快的速度點擊還是會出現bug
難點解決方案：
點擊前判斷最後那個到位沒，沒到位不能觸發函數； 鑒於普通人的手速沒那麽快，這個bug也無關緊要。
涉及的新知識：
無
優化方向：
無
備註：
本次，改進了getStyle()這個函數，加多了一個參數，讓它可以返回整數值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin:0; padding: 0; } #wrap{ position: relative; } #wrap div{ width: 60px; height: 60px; background: red; position: absolute; } </style> </head> <body> <!-- 需求： 點擊當前元素，看看是否有上個兄弟節點或者下個兄弟節點， 如果有，就讓他們依次下落（當前元素也會下落），否則就不用下落 --> <div id="wrap"></div> <script src="getId.js"></script> <script src="doMove.js"></script> <script src="main.js"></script> </body> </html>
var oWrap = $(‘wrap‘), num = 10; createDiv( num ); var oDiv = oWrap.getElementsByTagName(‘div‘), oDivW = parseInt( getStyle( oDiv[0] , ‘width‘ ) ), onOff = true; for(var i=0; i<num; i++){ oDiv[i].style.top = 0; oDiv[i].style.left = (oDivW + 20)*i + ‘px‘; oDiv[i].onOff = true; (function(i){ oDiv[i].onclick = function(){ var mI = ( i > (num-1)/2 ) ? 0 : num-1; if( this.onOff ){ if( getStyle( oDiv[mI] , ‘top‘ , true ) != 0 ){ return; } moveDown( this,8,300,10,130 ); }else{ if( getStyle( oDiv[mI] , ‘top‘ , true ) != 300 ){ return; } moveDown( this,8,0,10,130 ); } } })(i); } function moveDown( ele,step,endTop,frame,delay ){ var preObj = ele; var nextObj = ele; var i = 1; doMove( ele,‘top‘,step,endTop,0,frame ); ele.onOff = !ele.onOff; console.log( ele.onOff ) while(true){ if( preObj.previousSibling ){ preObj = preObj.previousSibling; preObj.onOff = !preObj.onOff; doMove( preObj,‘top‘,step,endTop,delay*i,frame ); } if( nextObj.nextSibling ){ nextObj = nextObj.nextSibling; nextObj.onOff = !nextObj.onOff; doMove( nextObj,‘top‘,step,endTop,delay*i,frame ); } if( !preObj.previousSibling && !nextObj.nextSibling ){ break; } i++; } } function createDiv( num ){ for(var i=0; i<num; i++){ var eDiv = document.createElement(‘div‘); oWrap.appendChild(eDiv); } }
一排元素往下掉 【總結】