淘宝首页交互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则比较灵活，能够随时退出循环，并且能够设置为按不固定的时间间隔来运行。