js學(xué)使用setTimeout實(shí)現(xiàn)輪循動(dòng)畫(huà)
更新時(shí)間：2017年07月17日 15:05:07 作者：diasa
這篇文章主要為大家詳細(xì)介紹了js使用setTimeout實(shí)現(xiàn)輪循動(dòng)畫(huà)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了setTimeout實(shí)現(xiàn)輪循動(dòng)畫(huà)的具體代碼，供大家參考，具體內(nèi)容如下
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='box'></div>
<script>
var oBox = document.getElementById("box");
var maxLeft = utils.win('clientWidth')-oBox.offsetWidth;
var step = 5;
var timer = null;
//使用遞歸思想完成setTimeout的輪循動(dòng)畫(huà)：每一次在執(zhí)行動(dòng)畫(huà)之前把上一次設(shè)置沒(méi)用的定時(shí)器清除掉，節(jié)約我們的內(nèi)存空間
function move(){
window.clearTimeout(timer);
var curLeft = utils.css(oBox,"left");
if(curLeft+step >= maxLeft){//邊界判斷
utils.css(oBox,"left",maxLeft);
return;
}
curLeft+=step;
utils.css(oBox,"left",curLeft);
timer = window.setTimeout(move,10)
}
move();
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript使用setTimeout實(shí)現(xiàn)倒計(jì)時(shí)效果
- JavaScript setTimeout()基本用法有哪些
- JavaScript setInterval()與setTimeout()計(jì)時(shí)器
- 簡(jiǎn)單通過(guò)settimeout看javascript的運(yùn)行機(jī)制
- 如何通過(guò)setTimeout理解JS運(yùn)行機(jī)制詳解
- 從setTimeout看js函數(shù)執(zhí)行過(guò)程
- JavaScript計(jì)時(shí)器用法分析【setTimeout和clearTimeout】
- 詳解JS中定時(shí)器setInterval和setTImeout的this指向問(wèn)題
- JavaScript中setTimeout的那些事兒
- JS關(guān)于for循環(huán)中使用setTimeout的四種解決方案
相關(guān)文章
這篇文章主要介紹了詳解JSON.stringify()的5個(gè)秘密特性，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
小程序頁(yè)面onload(),onready()加載順序詳解
本文主要介紹了小程序頁(yè)面onload(),onready()加載順序，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
js列舉css中所有圖標(biāo)的實(shí)現(xiàn)代碼
最近在做一個(gè)通用的配置模塊。配置模塊中必然要對(duì)系統(tǒng)的菜單、功能模塊、權(quán)限資源等進(jìn)行配置，為了更好的用戶體驗(yàn)，圖標(biāo)是必不可少的！2011-07-07
教你修改element-ui源碼給el-dialog添加全屏功能
el-dialog組件提供了fullscreen功能，但是無(wú)法滿足業(yè)務(wù)需求。系統(tǒng)使用了許多dialog，不方便重新封裝dialog組件，故直接對(duì)源碼進(jìn)行修改，這篇文章主要介紹了修改element-ui源碼給el-dialog添加全屏功能,需要的朋友可以參考下2022-11-11
bootstrap select2插件用ajax來(lái)獲取和顯示數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇bootstrap select2插件用ajax來(lái)獲取和顯示數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
JavaScript對(duì)象與數(shù)組的幾種常見(jiàn)復(fù)制方法
在 JavaScript 開(kāi)發(fā)中,對(duì)象和數(shù)組的復(fù)制是一個(gè)非常常見(jiàn)的操作,無(wú)論是函數(shù)參數(shù)傳遞、狀態(tài)管理,還是避免不必要的副作用,了解和掌握各種復(fù)制方式至關(guān)重要,我們將系統(tǒng)梳理 JavaScript 中的幾種常見(jiàn)復(fù)制方法,并對(duì)其應(yīng)用場(chǎng)景進(jìn)行詳細(xì)說(shuō)明,需要的朋友可以參考下2024-10-10
在實(shí)際工作中,開(kāi)發(fā)者常面臨一些需巧妙編程解決的挑戰(zhàn),有時(shí)幾行代碼就能迎刃而解,本文整理了一系列實(shí)用代碼片段,助您輕松處理URL、DOM操作、事件處理等常見(jiàn)問(wèn)題,希望對(duì)大家有所幫助2023-11-11
這篇文章主要為大家總結(jié)了一些JavaScript中字符串的常用方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下2022-12-12
js實(shí)現(xiàn)適合新聞?lì)悎D片的輪播效果
本文主要分享了js實(shí)現(xiàn)適合新聞?lì)悎D片輪播效果的示例代碼，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
清空代碼防止查看源代碼的js代碼...2007-07-07