快捷導(dǎo)航

用JavaScript實(shí)現(xiàn)動(dòng)畫(huà)效果的方法

更新時(shí)間：2013年07月20日 16:13:12 作者：

大家在使用Dreamweaver中的時(shí)間線功能或以做出很有趣的動(dòng)畫(huà)效果，Dreamweaver會(huì)自動(dòng)為用戶生成特定的程序代碼，大家有沒(méi)有想過(guò)動(dòng)畫(huà)的實(shí)現(xiàn)原理呢？

其實(shí)原理是很簡(jiǎn)單的，主要是使用了一個(gè)計(jì)時(shí)器函數(shù)，下面我為大家
演示一個(gè)簡(jiǎn)單的動(dòng)畫(huà)的制作過(guò)程，通過(guò)有關(guān)的介紹，大家可以舉一反三，做出更多很炫的動(dòng)畫(huà)效果。
　　這個(gè)實(shí)例的效果是點(diǎn)擊網(wǎng)頁(yè)上的“開(kāi)始移動(dòng)”按鈕，則其中的指定圖層就會(huì)從左到右移動(dòng)，在這個(gè)過(guò)程中你點(diǎn)擊“停止移動(dòng)”按鈕就會(huì)停止移動(dòng)。

復(fù)制代碼代碼如下:

　　<html>
　　<head>
　　<title>JavaScript Motion Sample</title>
　　<script language="JavaScript">
　　var movingID = null;
　　var scrolling = false;
　　function startMove()
　　{
　　 var left = eval(div1.style.left.replace("px", ""));
　　 if (left < document.body.scrollWidth - 150)
　　  div1.style.left = left + 1;
 　　else
 　　 div1.style.left = 10;
　　 movingID = setTimeout("startMove()", 10);
　　}
　　function stopMove()
　　{
　　 clearTimeout(movingID);
　　}
　　</script>
</head>
　　<body>
　　<div id="div1" style="visibility:visible; position:absolute; left:10; top:10; z-index:1;">
　　 <table bgColor="#FFFFCC" border="1"cellPadding="0" cellSpacing="0">
　　  <tr>
　　   <td>I can moving...</td>
　　  </tr>
　　 </table>
　　</div>
　　<br><br>
　　<input type="button" value="開(kāi)始移動(dòng)" onClick="startMove()">
　　<input type="button" value="停止移動(dòng)" onClick="stopMove()">
　　　</body>
　　</html>

　　這里主要使用了一個(gè)叫setTimeout(function, interval)函數(shù)，這個(gè)函數(shù)的參數(shù)格式為：
　　第一個(gè)參數(shù)“function”為超時(shí)后調(diào)用的函數(shù)名，第二個(gè)參數(shù)“interval”為超時(shí)值，以微秒為單位。
　　注意一點(diǎn)是如果要停止這個(gè)計(jì)時(shí)器，必須保存調(diào)用這個(gè)setTimeout()函數(shù)后的返回值，通過(guò)clearTimeout(id)函數(shù)來(lái)取消計(jì)時(shí)器。

您可能感興趣的文章:

相關(guān)文章

使用Javascript實(shí)現(xiàn)復(fù)制粘貼功能的示例代碼
本篇文章記錄如何通過(guò)js代碼實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板,之后可以粘貼到需要的地方的功能,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2023-09-09
使用JavaScript的ActiveXObject對(duì)象檢測(cè)應(yīng)用程序是否安裝的方法
這篇文章主要介紹了使用JavaScript的ActiveXObject對(duì)象檢測(cè)應(yīng)用程序是否安裝的方法,需要的朋友可以參考下
2014-04-04
js中apply方法的使用詳細(xì)解析
本文是對(duì)js中apply方法的使用進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
JavaScript類(lèi)的寫(xiě)法
這篇文章主要為大家詳細(xì)介紹了JavaScript類(lèi)的寫(xiě)法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
利用JavaScript編寫(xiě)一個(gè)花里胡哨的點(diǎn)擊按鈕
這篇文章主要介紹了如何利用HTML+CSS+JavaScript制作一個(gè)花里胡哨的點(diǎn)擊按鈕。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下
2022-03-03
javascript實(shí)現(xiàn)可鍵盤(pán)控制的抽獎(jiǎng)系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)可鍵盤(pán)控制的抽獎(jiǎng)系統(tǒng)的相關(guān)資料,需要的朋友可以參考下
2016-03-03
JavaScript地圖拖動(dòng)功能SpryMap的簡(jiǎn)單實(shí)現(xiàn)
SpryMap是一個(gè)獨(dú)立的并且是輕量級(jí)的JavaScript類(lèi)庫(kù)，它不依賴(lài)于任何其他的JS框架
2013-07-07
詳解JavaScript自定義函數(shù)
這篇文章主要介紹了JavaScript自定義函數(shù)的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
輸入法的回車(chē)與消息發(fā)送快捷鍵回車(chē)的沖突解決方法
下面小編就為大家?guī)?lái)一篇輸入法的回車(chē)與消息發(fā)送快捷鍵回車(chē)的沖突解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
innerHTML,outerHTML,innerText,outerText的用法及區(qū)別解析
本篇主要是對(duì)innerHTML,outerHTML,innerText,outerText的用法及區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12