用JavaScript實現(xiàn)動畫效果的方法
更新時間：2013年07月20日 16:13:12 作者：
大家在使用Dreamweaver中的時間線功能或以做出很有趣的動畫效果，Dreamweaver會自動為用戶生成特定的程序代碼，大家有沒有想過動畫的實現(xiàn)原理呢？
其實原理是很簡單的，主要是使用了一個計時器函數(shù)，下面我為大家
演示一個簡單的動畫的制作過程，通過有關的介紹，大家可以舉一反三，做出更多很炫的動畫效果。
這個實例的效果是點擊網(wǎng)頁上的“開始移動”按鈕，則其中的指定圖層就會從左到右移動，在這個過程中你點擊“停止移動”按鈕就會停止移動。
<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”為超時后調用的函數(shù)名，第二個參數(shù)“interval”為超時值，以微秒為單位。
注意一點是如果要停止這個計時器，必須保存調用這個setTimeout()函數(shù)后的返回值，通過clearTimeout(id)函數(shù)來取消計時器。
演示一個簡單的動畫的制作過程，通過有關的介紹，大家可以舉一反三，做出更多很炫的動畫效果。
這個實例的效果是點擊網(wǎng)頁上的“開始移動”按鈕，則其中的指定圖層就會從左到右移動，在這個過程中你點擊“停止移動”按鈕就會停止移動。
復制代碼 代碼如下:
<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”為超時后調用的函數(shù)名，第二個參數(shù)“interval”為超時值，以微秒為單位。
注意一點是如果要停止這個計時器，必須保存調用這個setTimeout()函數(shù)后的返回值，通過clearTimeout(id)函數(shù)來取消計時器。
相關文章
似乎某些程序員的集合是不相交的，就好像JS程序員和玩編譯原理和CPU指令的匯編程序員就幾乎沒有交叉。前些日子討論的火熱的“作用域鏈”問題，說白了就是尋址問題，不過，這個在C中十分簡單的問題卻被JS這個動態(tài)語言弄得很復雜。2009-04-04
可拖動可改變大小div的實現(xiàn)代碼，非常不錯的應用，大家可以參考下。2009-08-08
本文主要介紹了js百度地圖滾輪縮放所在點偏移問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要介紹了js之如何篩選出兩個數(shù)組相同的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了微信小程序之 catalog 切換實現(xiàn)解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
gridview生成時如何去掉style屬性中的border-collapse
默認gridview控件會在生成的html代碼中的style屬性中加入border-collapse:collapse，如果想把它去掉的話2014-09-09
這篇文章主要介紹了微信小程序iOS下拉白屏晃動問題解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了JS中的JSON對象的定義和取值實現(xiàn)代碼,也是json的入門知識，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了JS中間件設計模式,結合實例形式分析了JS中間件設計模式功能、原理、應用場景及相關操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要給大家介紹了關于微信小程序實現(xiàn)傳參數(shù)的幾種方法，分別是navigator跳轉時、全局變量、列表index下標取值以及form表單傳值的相關內容，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2018-01-01