淘宝交互--热点图标跳动

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() {
        var flag = true; 
　　　　/*定时器*/
        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);
    }

}

 

 

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则比较灵活，可以随时退出循环，而且可以设置为按不固定的时间间隔来运行。