标签：delay strong child document 相等 tag 鼠标 head 调用
需求
点击当前元素，看看是否有上个兄弟节点或者下个兄弟节点，
如果有，就让他们依次下落（当前元素也会下落），否则就不用下落
需求分析：
可以用之前做的那个拿来改改，重新做个也不难，就是用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); } }
标签：delay strong child document 相等 tag 鼠标 head 调用
原文地址：https://www.cnblogs.com/mflnhg/p/9526912.html
