JS实现点击掉落特效

js实现点击掉落特效 先看看效果图

话不多说代码

!DOCTYPE HTML>
    html>
    head>
    meta http-equiv="Content-type" content="text/html;
     charset=utf-8">
    tITle>
    无标题文档/title>
    script src="jquery.js">
    /script>
    script>
window.onload = function () {
    	VAR str = '';
    	var len = 20;
    	var aDiv = document.getelementsbytagname('div');
    	var timer = null;
    	var num = 0;
    		for ( var i=0;
     ilen;
 i++ ) {
    		str += 'div style="width:50px;
     height:50px;
     background:red;
     position:absolute;
     top:0px;
     left:'+ i*60 +'px;
    ">
    /div>
    ';
	}
    		document.body.innerHTML = str;
		document.onclick = function () {
    		clearInterval( timer );
		timer = setInterval( function (){
    			DM( aDiv[num], 'top', 23, 500 );
    			num ++;
			if ( num === len ) {
    				clearInterval( timer );
			}
		}
    , 100 );
	}
    ;
}
    ;
    /script>
    /head>
    body>
    /body>
    /html>
    

我这里引用了封装方法

function DM( obj, attr, dir, target, enDFn ) {
    		dir = parseInt(getStyle( obj, attr ))  target ? dir : -dir;
    		clearInterval( obj.timer );
		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();
			}
    			*/			endFn &
    &
     endFn();
					}
			}
    , 30);
}
    

到此这篇关于JS实现点击掉落特效的文章就介绍到这了,更多相关js点击掉落内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• Javascript实现打鼓效果

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！