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 相关文章推荐
javascript显示选择目录对话框的代码
Nov 10 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
JS中async/await实现异步调用的方法
Aug 28 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多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
Python中url标签使用知识点总结
2020/01/16 Python
浅谈Python中的字符串
2020/06/10 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
秘书行业自我鉴定范文
2013/12/30 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
开学典礼致辞
2015/07/29 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis