html一滴水掉下来特效,JS实现点击掉落特效

js实现点击掉落特效 先看看效果图

话不多说代码

无标题文档

window.onload = function () {

var str = '';

var len = 20;

var aDiv = document.getElementsByTagName('div');

var timer = null;

var num = 0;

for ( var i=0; i

str += '

}

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

};

};

我这里引用了封装方法

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点击掉落内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！