JS实现点击掉落特效_JavaScript

上一篇: Javascript实现打鼓效果下一篇:Javascript实现关闭广告效果

JS实现点击掉落特效

发布时间：2022-04-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了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; 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 &#63; dir : -dir;
	
	clearInterval( obj.timer );
	
	obj.timer = setInterval(function () {
		
		var speed = parseInt(getStyle( obj, attr )) + dir;			// 步长
		
		if ( speed > target && dir > 0 || speed < target &amp;& dir < 0 ) {
			speed = target;
		}
		
		obj.style[attr] = speed + 'px';
		
		if ( speed == target ) {
			clearInterval( obj.timer );
			
			/*
			if ( endFn ) {
				endFn();
			}
			*/
			endFn && endFn();
			
		}
		
	}, 30);
}

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

您可能感兴趣的文章:

Javascript实现打鼓效果

脚本宝典总结

以上是脚本宝典为你收集整理的JS实现点击掉落特效全部内容，希望文章能够帮你解决JS实现点击掉落特效所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: Javascript实现打鼓效果下一篇:Javascript实现关闭广告效果

猜你在找的JavaScript相关文章

html font标签如何设置字体大小？html font标签属性用法介绍 2022-05-16
vue3+TypeScript+vue-router的使用方法 2022-04-16
vue3获取当前路由地址 2022-04-16
如何利用React实现图片识别App 2022-04-16
JavaScript展开运算符和剩余运算符的区别详解 2022-04-16
微信小程序中使用vant框架的具体步骤 2022-04-16
Vue elementUI表单嵌套表格并对每行进行校验详解 2022-04-16
如何利用Typescript封装本地存储 2022-04-16
微信小程序中wxs文件的一些妙用分享 2022-04-16
JavaScript的Set数据结构详解 2022-04-16