网络编程
位置：首页>> 网络编程>> JavaScript>> JS实现点击掉落特效

JS实现点击掉落特效

作者：小杨的旺仔没有牛奶　　发布时间：2023-09-12 12:50:33　

标签：js,点击,掉落

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);
}

来源：https://blog.csdn.net/qq_38259997/article/details/103764058

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com