JS實現(xiàn)點擊掉落特效
更新時間：2021年01月29日 10:37:40 作者：小楊的旺仔沒有牛奶
這篇文章主要介紹了JS實現(xiàn)點擊掉落特效,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
js實現(xiàn)點擊掉落特效 先看看效果圖
話不多說代碼
<!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實現(xiàn)點擊掉落特效的文章就介紹到這了,更多相關js點擊掉落內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了Openlayers實現(xiàn)地圖的基本操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了利用策略模式與裝飾模式擴展JavaScript表單驗證功能,需要的朋友可以參考下2017-02-02
ParticlesJS是一個輕量級的創(chuàng)建粒子背景的 JavaScript 庫，接下來通過本文給大家分享JS庫之ParticlesJS使用簡介，感興趣的朋友一起看看吧2017-09-09
GUID（全局統(tǒng)一標識符）是指在一臺機器上生成的數(shù)字，下面為大家介紹下原生JavaScript生成GUID的實現(xiàn)，需要的朋友不要錯過2014-09-09
Base64編碼加密JS代碼網頁版，在文本框中輸入任意字符串，即可將該字符串按Base64編碼進行加密，也可將任意Base64編碼的字符解密顯示正常值2013-03-03
forEach()是JavaScript中一個常用的方法,用于遍歷數(shù)組或類數(shù)組對象中的每個元素,本文就來介紹一下JavaScript forEach的幾種用法小結,具有一定的參考價值,感興趣的可以了解一下2023-11-11
這篇文章主要介紹了JS表的模擬方法,涉及javascript模擬表的生成、添加與刪除節(jié)點的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
微信小程序使用ucharts在小程序中加入橫屏展示功能的全過程
這篇文章主要給大家介紹了關于微信小程序使用ucharts在小程序中加入橫屏展示功能的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用微信小程序具有一定的參考學習價值,需要的朋友可以參考下2022-09-09
實現(xiàn)iframe延時加載...2006-10-10
這篇文章主要介紹了詳解小程序輸入框閃爍BUG解決方案,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08