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点击掉落内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！
原文链接：https://blog.csdn.net/qq_38259997/article/details/103764058