一排元素往下掉【总结】

最新推荐文章于 2021-05-31 05:42:12 发布

anyan5807

最新推荐文章于 2021-05-31 05:42:12 发布

阅读量124

点赞数

原文链接：http://www.cnblogs.com/mflnhg/p/9526912.html

版权

需求

点击当前元素，看看是否有上个兄弟节点或者下个兄弟节点，
如果有，就让他们依次下落（当前元素也会下落），否则就不用下落

需求分析：

可以用之前做的那个拿来改改，重新做个也不难，就是用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);
    }


}

转载于:https://www.cnblogs.com/mflnhg/p/9526912.html

anyan5807

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一排元素往下掉【总结】

需求点击当前元素，看看是否有上个兄弟节点或者下个兄弟节点，如果有，就让他们依次下落（当前元素也会下落），否则就不用下落需求分析：可以用之前做的那个拿来改改，重新做个也不难，就是用js生成一下div，再根据数量以及点击的位置一次向外延迟调用doMove函数点击其中一个div --- 被点击的div不延迟 --- 左右向外扩展，每个都绑定doMove函数，每外一格...
复制链接

扫一扫