用JavaScript實(shí)現(xiàn)動畫效果的方法
更新時間：2013年07月20日 16:13:12 作者：
大家在使用Dreamweaver中的時間線功能或以做出很有趣的動畫效果，Dreamweaver會自動為用戶生成特定的程序代碼，大家有沒有想過動畫的實(shí)現(xiàn)原理呢？
其實(shí)原理是很簡單的，主要是使用了一個計時器函數(shù)，下面我為大家
演示一個簡單的動畫的制作過程，通過有關(guān)的介紹，大家可以舉一反三，做出更多很炫的動畫效果。
這個實(shí)例的效果是點(diǎn)擊網(wǎng)頁上的“開始移動”按鈕，則其中的指定圖層就會從左到右移動，在這個過程中你點(diǎn)擊“停止移動”按鈕就會停止移動。
<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="開始移動" onClick="startMove()">
<input type="button" value="停止移動" onClick="stopMove()">
</body>
</html>
這里主要使用了一個叫setTimeout(function, interval)函數(shù)，這個函數(shù)的參數(shù)格式為：
第一個參數(shù)“function”為超時后調(diào)用的函數(shù)名，第二個參數(shù)“interval”為超時值，以微秒為單位。
注意一點(diǎn)是如果要停止這個計時器，必須保存調(diào)用這個setTimeout()函數(shù)后的返回值，通過clearTimeout(id)函數(shù)來取消計時器。
演示一個簡單的動畫的制作過程，通過有關(guān)的介紹，大家可以舉一反三，做出更多很炫的動畫效果。
這個實(shí)例的效果是點(diǎn)擊網(wǎng)頁上的“開始移動”按鈕，則其中的指定圖層就會從左到右移動，在這個過程中你點(diǎn)擊“停止移動”按鈕就會停止移動。
復(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="開始移動" onClick="startMove()">
<input type="button" value="停止移動" onClick="stopMove()">
</body>
</html>
這里主要使用了一個叫setTimeout(function, interval)函數(shù)，這個函數(shù)的參數(shù)格式為：
第一個參數(shù)“function”為超時后調(diào)用的函數(shù)名，第二個參數(shù)“interval”為超時值，以微秒為單位。
注意一點(diǎn)是如果要停止這個計時器，必須保存調(diào)用這個setTimeout()函數(shù)后的返回值，通過clearTimeout(id)函數(shù)來取消計時器。
相關(guān)文章
使用Javascript實(shí)現(xiàn)復(fù)制粘貼功能的示例代碼
本篇文章記錄如何通過js代碼實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板,之后可以粘貼到需要的地方的功能,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-09-09
使用JavaScript的ActiveXObject對象檢測應(yīng)用程序是否安裝的方法
這篇文章主要介紹了使用JavaScript的ActiveXObject對象檢測應(yīng)用程序是否安裝的方法,需要的朋友可以參考下2014-04-04
本文是對js中apply方法的使用進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript類的寫法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
利用JavaScript編寫一個花里胡哨的點(diǎn)擊按鈕
這篇文章主要介紹了如何利用HTML+CSS+JavaScript制作一個花里胡哨的點(diǎn)擊按鈕。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-03-03
javascript實(shí)現(xiàn)可鍵盤控制的抽獎系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)可鍵盤控制的抽獎系統(tǒng)的相關(guān)資料,需要的朋友可以參考下2016-03-03
JavaScript地圖拖動功能SpryMap的簡單實(shí)現(xiàn)
SpryMap是一個獨(dú)立的并且是輕量級的JavaScript類庫，它不依賴于任何其他的JS框架2013-07-07
這篇文章主要介紹了JavaScript自定義函數(shù)的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
下面小編就為大家?guī)硪黄斎敕ǖ幕剀嚺c消息發(fā)送快捷鍵回車的沖突解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
innerHTML,outerHTML,innerText,outerText的用法及區(qū)別解析
本篇主要是對innerHTML,outerHTML,innerText,outerText的用法及區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12