JS实现点击掉落特效


Posted in Javascript onJanuary 29, 2021

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 ? 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 相关文章推荐
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
Vue+Django项目部署详解
May 30 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
详解React的回调渲染模式
Sep 10 Javascript
Javascript实现关闭广告效果
Jan 29 #Javascript
Vue 实例中使用$refs的注意事项
Jan 29 #Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 #Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 #Vue.js
聊聊vue 中的v-on参数问题
Jan 29 #Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 #Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 #Vue.js
You might like
PHP脚本数据库功能详解(上)
2006/10/09 PHP
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
PHP内核探索:变量概述
2014/01/30 PHP
php随机抽奖实例分析
2015/03/04 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
javascript自执行函数
2017/02/10 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
详细分析JS函数去抖和节流
2017/12/05 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
Python采用Django制作简易的知乎日报API
2016/08/03 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
大学生职业生涯规划书前言
2014/01/09 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
教师节领导致辞
2015/07/29 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript