熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

用JavaScript實現動畫效果

2022-06-13   來源: JSP教程 

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

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

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

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

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

  function startMove()
  {
   var left = eval(divstyleleftreplace(px ));
   if (left < documentbodyscrollWidth )
    divstyleleft = left + ;
   else
    divstyleleft = ;
   movingID = setTimeout(startMove() );
  }

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

  </head>
  <body>
  <div id=div >
   <table bgColor=#FFFFCC border=cellPadding= cellSpacing=>
    <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)函數這個函數的參數格式為
  第一個參數function為超時後調用的函數名第二個參數interval為超時值以微秒為單位

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


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19691.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.