setTimeout(function, duration)：這個函數(shù)在規(guī)定的時間 duration 到達時，會調(diào)用參數(shù)中的函數(shù) function。
setInterval(function, duration)：這個方法調(diào)用了之后會清除所有 setTimeout() 函數(shù)設(shè)定的計時器。

JavaScript 能夠設(shè)置一系列文檔模型對象的屬性值，包括該對象在屏幕中的位置。你可以通過設(shè)置 top 和 left 等對象的屬性值，從而讓該對象放在屏幕中任何位置。如下是該語法的一個簡單例子：

    // Set distance from left edge of the screen.
    object.style.left = distance in pixels or points; 

    or
    // Set distance from top edge of the screen.
    object.style.top = distance in pixels or points;

手動動畫

讓我們利用文檔對象模型的對象的屬性值實現(xiàn)一個簡單的動畫，JavaScript 的函數(shù)如下：

    <html>
    <head>
    <title>JavaScript Animation</title>
    <script type="text/javascript">
    <!--
    var imgObj = null;
    function init(){
        imgObj = document.getElementById('myImage');
        imgObj.style.position= 'relative'; 
    imgObj.style.left = '0px'; 
    }
    function moveRight(){
        imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
    }
    window.onload =init;
    //-->
    </script>
    </head>
    <body>
    <form>
    <img id="myImage" src="/images/html.gif" />
    <p>Click button below to move the image to right</p>
    <input type="button" value="Click Me" onclick="moveRight();" />
    </form>
    </body>
    </html>

如下是對上面例子的解釋：

我們利用 JavaScript 的函數(shù) getElementById() 得到了文檔對象模型對象，接著把它賦值給一個全局變量 imgObj。
我們定義了一個初始化函數(shù) init() 用來初始化 imgObj 對象,初始化時設(shè)置了該對象的 position 和 left 屬性的值。
初始化函數(shù)在網(wǎng)頁窗口加載的時候被調(diào)用。
最后，我們調(diào)用 moveRight() 函數(shù)增加該對象到左邊邊界的距離為 10 個像素點。你也可以設(shè)置該對象到左邊的距離為負值。

自動動畫

在上面的例子中我們已經(jīng)看到如何讓一張圖片在每次點擊之后向右移動。我們可以通過利用 JavaScript 中的函數(shù) setTimeout() 讓它自動執(zhí)行這個操作：

    <html>
    <head>
    <title>JavaScript Animation</title>
    <script type="text/javascript">
    <!--
    var imgObj = null;
    var animate ;
    function init(){
    imgObj = document.getElementById('myImage');
    imgObj.style.position= 'relative'; 
    imgObj.style.left = '0px'; 
    }
    function moveRight(){
    imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
    animate = setTimeout(moveRight,20); // call moveRight in 20msec
    }
    function stop(){
    clearTimeout(animate);
    imgObj.style.left = '0px'; 
    }
    window.onload =init;
    //-->
    </script>
    </head>
    <body>
    <form>
    <img id="myImage" src="/images/html.gif" />
    <p>Click the buttons below to handle animation</p>
    <input type="button" value="Start" onclick="moveRight();" />
    <input type="button" value="Stop" onclick="stop();" />
    </form>
    </body>
    </html>

這里我們增加了一些新的知識：

moveRight() 函數(shù)通過調(diào)用 setTimeout() 函數(shù)設(shè)置 imgObj 對象的位置。
我們添加了一個新的函數(shù) stop() ，它的作用是用來清除 setTimeout() 函數(shù)設(shè)置的計時器和讓文檔對象處于它的初始位置。

伴隨鼠標事件的翻轉(zhuǎn)

如下是一個簡單的例子演示由鼠標事件引起的圖片翻轉(zhuǎn)：

    <html>
    <head>
    <title>Rollover with a Mouse Events</title>
    <script type="text/javascript">
    <!--
    if(document.images){
        var image1 = new Image();      // Preload an image
        image1.src = "/images/html.gif";
        var image2 = new Image();      // Preload second image
        image2.src = "/images/http.gif";
    }
    //-->
    </script>
    </head>
    <body>
    <p>Move your mouse over the image to see the result</p>
    <a href="#" onMouseOver="document.myImage.src=image2.src;"
            onMouseOut="document.myImage.src=image1.src;">
    <img name="myImage" src="/images/html.gif" />
    </a>
    </body>
    </html>

讓我們來看看這里的不同點：

在加載這個網(wǎng)頁的時候，if 語句是否存在圖片對象。如果沒有有效的圖片對象，那么下面的語句塊不會被執(zhí)行。
Image() 構(gòu)造方法創(chuàng)建和預(yù)加載一個新的圖片對象稱為 image1。
src 屬性值被賦值為外部圖片文件的路徑名稱，即是 /images/html.gif。
同樣的方式，我們創(chuàng)建了 image2對象，并且給它賦值為 /images/http.gif。
符號 # 禁用鏈接，這樣瀏覽器中點擊該鏈接就不會發(fā)生跳轉(zhuǎn)。這個鏈接表示的是一個圖片。
onMouseOver 事件句柄在用戶的鼠標移動到鏈接上時會被觸發(fā)，同樣，用戶鼠標離開圖片鏈接時會觸發(fā) onMouseOut 事件句柄。
當鼠標移動到圖片上時，HTTP 上的圖片就會從第一個變到第二個。用鼠標離開圖片時，最開始的那副圖片就會被顯示。
當鼠標從圖片鏈接上離開時，初始的 html.gif 圖片會再次出現(xiàn)在屏幕上面。

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

動畫

手動動畫

自動動畫

伴隨鼠標事件的翻轉(zhuǎn)