JS实现点击掉落特效
更新时间：2021年01月29日 10:37:40 作者：小杨的旺仔没有牛奶
这篇文章主要介绍了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点击掉落内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了Openlayers实现地图的基本操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了利用策略模式与装饰模式扩展JavaScript表单验证功能,需要的朋友可以参考下2017-02-02
ParticlesJS是一个轻量级的创建粒子背景的 JavaScript 库，接下来通过本文给大家分享JS库之ParticlesJS使用简介，感兴趣的朋友一起看看吧2017-09-09
GUID（全局统一标识符）是指在一台机器上生成的数字，下面为大家介绍下原生JavaScript生成GUID的实现，需要的朋友不要错过2014-09-09
Base64编码加密JS代码网页版，在文本框中输入任意字符串，即可将该字符串按Base64编码进行加密，也可将任意Base64编码的字符解密显示正常值2013-03-03
forEach()是JavaScript中一个常用的方法,用于遍历数组或类数组对象中的每个元素,本文就来介绍一下JavaScript forEach的几种用法小结,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
这篇文章主要介绍了JS表的模拟方法,涉及javascript模拟表的生成、添加与删除节点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
微信小程序使用ucharts在小程序中加入横屏展示功能的全过程
这篇文章主要给大家介绍了关于微信小程序使用ucharts在小程序中加入横屏展示功能的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友可以参考下2022-09-09
实现iframe延时加载...2006-10-10
这篇文章主要介绍了详解小程序输入框闪烁BUG解决方案,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论