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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
一个简单的js树形菜单
Dec 09 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
详解tween.js 中文使用指南
Jan 05 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 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中SQL注入攻击与XSS攻击
2012/06/10 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
简洁的十分钟Python入门教程
2015/04/03 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
python开启debug模式的方法
2019/06/27 Python
Python 求数组局部最大值的实例
2019/11/26 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
村委会贫困证明
2014/01/14 职场文书
财产公证书格式
2014/04/10 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
深入理解python多线程编程
2021/04/18 Python
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
MySQL 原理与优化之Update 优化
2022/08/14 MySQL