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)文章
這篇文章主要介紹了JS控制按鈕10秒鐘后可用的方法,涉及JavaScript基于時(shí)間函數(shù)控制頁(yè)面元素樣式動(dòng)態(tài)變換的技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了原生javascript實(shí)現(xiàn)隔行換色,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了微信小程序云開(kāi)發(fā)之云函數(shù)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
js?實(shí)現(xiàn)picker?選擇器示例詳解
這篇文章主要為大家介紹了js?實(shí)現(xiàn)picker?選擇器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
javascript jq 彈出提示效果實(shí)現(xiàn)的方法有很多，可能會(huì)在某些地方看到過(guò)，下面為大家演示個(gè)示例介紹下如何實(shí)現(xiàn)jq 彈出層，感興趣的朋友可以參考下2013-08-08
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)滑動(dòng)插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
正則表達(dá)式是匹配模式，要么匹配字符，要么匹配位置。在JavaScript中正則表達(dá)式常常用來(lái)驗(yàn)證表單等。本文將帶大家深入了解一下JavaScript中的正則表達(dá)式應(yīng)該如何使用，需要的朋友可以參考一下2021-12-12
用表格輸出1-1000之間的數(shù)字實(shí)現(xiàn)代碼(附特效)
本文將介紹下用表格輸出1-1000之間的數(shù)字同時(shí)附有特效，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-04-04
前端圖片懶加載(lazyload)的實(shí)現(xiàn)方法(提高用戶(hù)體驗(yàn))
圖片懶加載又稱(chēng)圖片延時(shí)加載、惰性加載，即在用戶(hù)需要使用圖片的時(shí)候加載，這樣可以減少請(qǐng)求，節(jié)省帶寬，提高頁(yè)面加載速度，相對(duì)的，也能減少服務(wù)器壓力,下面通過(guò)本文給大家分享圖片懶加載lazyload的實(shí)現(xiàn)方法，感興趣的朋友一起看看吧2017-08-08
JavaScript實(shí)現(xiàn)文件下載的超簡(jiǎn)單兩種方式分享
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)文件下載的超簡(jiǎn)單兩種方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12