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