用JavaScript實現動畫效果

大傢在使用Dreamweaver中的時間線功能或以做出很有趣的動畫效果,Dreamweaver會自動為用戶生成特定的程序代碼,大傢有沒有想過動畫的實現原理呢?其實原理是很簡單的,主要是使用瞭一個計時器函數,下面我為大傢


演示一個簡單的動畫的制作過程,通過有關的介紹,大傢可以舉一反三,做出更多很炫的動畫效果。


  這個實例的效果是點擊網頁上的“開始移動”按鈕,則其中的指定圖層就會從左到右移動,在這個過程中你點擊“停止移動”按鈕就會停止移動。


  <html>
  <head>
  <title>JavaScript Motion Sample</title>


  <script language=”JavaScript”>
  var movingID = null;
  var scrolling = false;


  function startMove()
  {
   var left = eval(p1.style.left.replace(“px”, “”));
   if (left < document.body.scrollWidth – 150)
    p1.style.left = left + 1;
   else
    p1.style.left = 10;
   movingID = setTimeout(“startMove()”, 10);
  }


  function stopMove()
  {
   clearTimeout(movingID);
  }
  </script>


</head>
  <body>
  <p id=”p1″ 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>
  </p>


  <br><br>
  <input type=”button” value=”開始移動” onClick=”startMove()”>
  <input type=”button” value=”停止移動” onClick=”stopMove()”>


   </body>
  </html>
 


  這裡主要使用瞭一個叫setTimeout(function, interval)函數,這個函數的參數格式為:
  第一個參數“function”為超時後調用的函數名,第二個參數“interval”為超時值,以微秒為單位。


  註意一點是如果要停止這個計時器,必須保存調用這個setTimeout()函數後的返回值,通過clearTimeout(id)函數來取消計時器。

You May Also Like