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 相关文章推荐
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
微信小程序class封装http代码实例
Aug 24 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
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
js实现文本框中焦点在最后位置
2014/03/04 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
js闭包学习心得总结
2018/04/17 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
python 图片验证码代码分享
2012/07/04 Python
python中常用检测字符串相关函数汇总
2015/04/15 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
就业自荐信
2013/12/04 职场文书
自动化专业个人求职信范文
2013/12/30 职场文书
初中生自我评价
2014/02/01 职场文书
毕业实习评语
2014/02/10 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
写自荐信的注意事项
2014/03/09 职场文书
广播体操口号
2014/06/18 职场文书
英文自荐信范文
2015/03/25 职场文书
房贷工资证明范本
2015/06/12 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js