淘寶首頁交互1--熱點圖標跳動

html代碼以下：

<div id="head">
    <div class="navigation">
        <ul class="cont">
            <h2>導航</h2>
            <li><a class="hot" href="#">女裝</a></li>
            <li><a class="n" href="#">家電</a></li>
        </ul>
    </div>                   
<div>

js代碼以下：

/*驅動函數*/
function addLoadEvent(func) {
    var oldonload = window.onload;
    if(typeof window.onload != 'function') {
        window.onload = func;
    }    else {
            window.onload = function() {    
                oldonload();
                func();
            };
    }
}

addLoadEvent(Jump);

function Jump() {
　　/*獲取元素*/
    var oHead = document.getElementById('head');
    var h3 = oHead.getElementsByClassName('cont');
    var aHot = oHead.getElementsByClassName('hot');
    var aN = oHead.getElementsByClassName('n');
    var arr = [];
    var timer = null; //定義一個空對象
　　//遍歷全部含有指定類名的元素，推入數組
    for(var i=0; i<aHot.length; i++){
        arr.push(aHot[i]);  
    }
    for(var i=0; i<aN.length; i++){
        arr.push(aN[i]);
    }
    h3.onmouseover = jump();
　　/*跳動功能函數*/
    function jump() {
　　　　/*根據flag的值來進行背景圖片位置的切換，使背景圖片實現上下跳動的動態效果*/
        var flag = true; 
　　　　 clearInterval(timer); //利用間隙調用的參數ID，取消間隙調用
　　　　/*定時器*/
        timer = setInterval (function() {
            if (flag) {
                for(var i=0; i<aHot.length; i++) {
                    arr[i].style.background = 'url(hot) no-repeat right 2px';
                }
                for(var i=aHot.length-1; i<arr.length; i++) {
                    arr[i].style.background = 'url(n) no-repeat right 2px';
                }
                flag = false;
            } else {
                for(var i=0; i<aHot.length; i++) {
                    arr[i].style.background = 'url(hot) no-repeat right top';
                }
                for(var i=aHot.length-1; i<arr.length; i++) {
                    arr[i].style.background = 'url(n) no-repeat right top';
                }
                flag = true;
            }
        },3000);
    }

}

 

 

windows對象的兩個方法：setTimeout()和setInterval().

超時調用：在指定時間事後執行代碼。

setTimeout

定義和用法: setTimeout()方法用於在指定的毫秒數後調用函數。

語法: setTimeout( func , timer) 　

參數： func：要調用的函數後要執行的 JavaScript 函數。timer：在執行代碼前需等待的毫秒數。 　

提示： setTimeout() 只執行 func 一次。若是要屢次調用，請使用 setInterval()。不推薦傳遞字符串。

間歇調用：按照指定的時間間隔重複的執行代碼，直至間歇調用被取消或者頁面被卸載。

setInterval

setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。該方法會不停地調用函數，直到調用 clearInterval() 或窗口被關閉，其返回的 ID 值可用做 clearInterval() 方法的參數。

語法: setInterval(func , timer)

參數: func 必需。要調用的函數或要執行的代碼串。millisec 必須。週期性執行或調用 code 之間的時間間隔，以毫秒計。

返回值: 一個能夠傳遞給 Window.clearInterval() 從而取消對 code 的週期性執行的值。

注：取消間隙調用的重要性遠高於取消超時調用

setTimeout和setinterval的主要區別是：

setTimeout只運行一次，也就是說設定的時間到後就觸發運行指定代碼，運行完後即結束。若是運行的代碼中再次運行一樣的setTimeout命令，則可循環運行。（即 要循環運行，需函數自身再次調用 setTimeout()）

setinterval是循環運行的，即每到設定時間間隔就觸發指定代碼，若是隊列中有其它函數等待執行，則等待其它函數執行完了才進行本次循環，這時，時間間隔就不是設定的時間間隔。這是真正的定時器。

setinterval使用簡單，而setTimeout則比較靈活，能夠隨時退出循環，並且能夠設置爲按不固定的時間間隔來運行。