一排元素往下掉 总结

Posted mflnhg

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一排元素往下掉 总结相关的知识,希望对你有一定的参考价值。

需求

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

需求分析:

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


}

 


以上是关于一排元素往下掉 总结的主要内容,如果未能解决你的问题,请参考以下文章

在场景中加入第一人称视角运行后一直往下掉的解决方案

unity3d 中的模型加了重力之后就会穿过地面往下掉,我模型和地面都加了碰撞啊,没有选择trigger

unity中物体碰撞不消失的原因

unity怎么做利用刚体碰撞触发ui界面

html实战代码:浮动元素横排居中显示的实现

PostgreSQL DBA(13) - 自顶往下的方法阅读执行计划