JS实现点击掉落特效

  • Z时代
  • 2024-01-10
  • 分类：IT

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; i<len; 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点击掉落内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

以上是 JS实现点击掉落特效 的全部内容， 来源链接： utcz.com/p/219506.html

回到顶部