本文介绍如何使用原生JavaScript实现点击页面元素掉落的效果。通过封装运动函数DM，利用定时器控制元素位置变化，结合循环创建多个DOM节点，实现简洁流畅的掉落动画。无需第三方库，适合前端初学者学习DOM操作与动画原理。
特效效果预览
首先展示点击掉落特效的最终效果，以便直观了解实现目标。
核心代码实现
接下来直接展示实现该特效的核心代码。
<!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);
}至此，关于使用JavaScript实现点击掉落特效的介绍已完成。如需了解更多相关技巧，可查阅本站往期文章或继续浏览后续内容，感谢支持。