延遲菜單

獲取class兼容方法：

    function getByClass(oParent, sClass) {
        var aEle = oParent.getElementsByTagName('*');
        var result = [] //最后返回数组
        var re = new RegExp('\\b' + sClass + '\\b', 'i');//正则对象
        for (var i = 0; i < aEle.length; i++) {
            if (re.test(aEle[i].className)) {
                result.push(aEle[i])
            }
        }
        return result;
    }

js代碼：

window.onload = function(){
    var ul = document.getElementsByTagName('ul')[0]
    var a = getByClass(document, 'normal')
    var span1 = getByClass(document, 'float_layer');
    var timer = null;
    for (var i = 0; i < a.length; i++) {
        a[i].index = i;
        a[i].onmouseover = function () { //移到a.normal
            for (var i = 0; i < a.length; i++) { //清除所有顯示
                span1[i].style.display = 'none'
            }
            span1[this.index].style.display = 'block' //當前顯示
            clearInterval(timer) //在a.normal上也須清除定時器
        }
        a[i].onmouseout = function () { //移開a.normal
            var This = this
            timer = setTimeout(function () {
                span1[This.index].style.display = 'none' //this指setTimeout的對象window，改變this指向
            }, 1000)
        }
        span1[i].onmouseover = function () { //在span.float_layer也顯示，所以需要清除timer
            clearInterval(timer)
        }
        span1[i].onmouseout = function () { //離開span.float_layer，消失
            var This = this;
            timer = setTimeout(function () {
                This.style.display = 'none'
            }, 1000)
        }
    }
}

運行