需求
点击当前元素,看看是否有上个兄弟节点或者下个兄弟节点,
如果有,就让他们依次下落(当前元素也会下落),否则就不用下落
需求分析:
可以用之前做的那个拿来改改,重新做个也不难,就是用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); } }