• 一排元素往下掉


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

    HTML

    <div id="box"></div>
    

    CSS

    #box{
    	position: relative;
    	margin: 20px auto;
    }	
    #box div{
    	 50px;
    	height: 50px;
    	background: red;
    	position: absolute;
    	top: 0px;
    }
    

    JS

    var Box=document.getElementById("box");
    var aDiv=Box.getElementsByTagName("div");
    var num=0;
    var num1=0;
    var timer=null;
    var timer1=null;
    
    //生成div
    for (var i=0;i<10;i++) {
    	Box.innerHTML+="<div style='left:"+i*60+"px;'></div>";
    }
    
    for (var i=0;i<aDiv.length;i++) {
    	aDiv[i].index=i;
    	aDiv[i].onclick=function(){
    		//用两个变量保存点击的div的下标
    		num1=num=this.index;
    		//被点击的div先往下运动
    		moveTo(aDiv[num],"top",200,10);
    		
    		//然后被点击的div两侧的div依次往下掉落
    		//控制被点击的div右边的div下落
    		if(this.index<9){
    			timer=setInterval(function(){
    				if(num>=8){
    					clearInterval(timer);
    				}
    				num++;
    				moveTo(aDiv[num],"top",200,10);
    			},500)
    		}
    		
    		//控制被点击的div左边的div下落
    		if(this.index>0){
    			timer1=setInterval(function(){
    				if(num1<=1){
    					clearInterval(timer1);
    				}
    				num1--;
    				moveTo(aDiv[num1],"top",200,10);
    			},500)
    		}
    	}
    }
    
    //运动函数
    function moveTo(obj,attr,target,dir,endFn){
        clearInterval(obj.timer);
        dir=parseInt(getStyle(obj,attr))<target?dir:-dir;
        obj.timer=setInterval(function(){
            var speed=parseInt(getStyle(obj,attr))+dir;
            if(speed>target&&dir>0||speed<target&&dir<0){
                speed=target;
            }
            obj.style[attr]=speed+"px";
             //清除定时器
            if(speed==target){
                clearInterval(obj.timer);
                if(endFn){
                    endFn();
                }
            }
        },30)
    }
    
    //获得元素样式
    function getStyle(obj,attr){
    	if(obj.currentStyle){
    		return obj.currentStyle[attr];
    	}else{
    		return getComputedStyle(obj)[attr];
    	}
    }
    

      

  • 相关阅读:
    volatile关键字
    线程的状态
    java中的匿名内部类
    java高精度实数和小数
    JS、JSP、ASP、CGI
    论文结构要求
    java中的标识符、关键字、保留字
    java IODemo
    Bagging和Boosting的区别
    由Memcached升级到 Couchbase的 Java 客户端的过程记录(一)
  • 原文地址:https://www.cnblogs.com/yangxue72/p/8041344.html
Copyright © 2020-2023  润新知