经典延时弹出二级菜单 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延时菜单</title>
</head>
<style type="text/css">
    * { margin: 0; padding: 0; font-size: 12px; }
    ul,ol,li{list-style: none;}
    #nav{position: absolute; left: 50px; top: 50px;}
    .nav-item { width:  80px; height: 30px; background: #09c; color: #fff; border-right: solid 1px #fff; border-bottom: solid 1px #fff; text-align: center; line-height: 30px; }
    #subNav{position: absolute; left: 140px; top:  50px; }
    .float-layer { width: 200px; height: 120px; background: #ccc; display:  none; text-align: center; padding: 20px; }
</style>
<body>
<div id="nav">
    <ul>
        <li class="nav-item">菜单1</li>
        <li class="nav-item">菜单2</li>
        <li class="nav-item">菜单3</li>
        <li class="nav-item">菜单4</li>
    </ul>
</div>
<div id="subNav">
    <ul>
        <li class="float-layer">弹出层1</li>
        <li class="float-layer">弹出层2</li>
        <li class="float-layer">弹出层3</li>
        <li class="float-layer">弹出层4</li>
    </ul>
</div>
<script type="text/javascript">
window.onload = function() {

    var aA = getByClass(document,'nav-item');
    var aFloatLayer = getByClass(document,'float-layer');
    var timer = null;

    for (var i = 0; i < aA.length; i++) {
        aA[i].index = i;
        aA[i].onmouseover = function(){
            for (var i = 0; i < aFloatLayer.length; i++) {
                aFloatLayer[i].style.display = 'none';
            };
            aFloatLayer[this.index].style.display = 'block';
        }

        aA[i].onmouseout = function() {
            var This = this;
            timer = setTimeout (function(){
                aFloatLayer[This.index].style.display = 'none';
            },200);
        };

        aFloatLayer[i].onmouseover = function(){
            clearInterval(timer);
        }
        aFloatLayer[i].onmouseout = function(){
            var This = this;
            timer = setTimeout (function(){
                This.style.display = 'none';
            },200);
        }
    };

    function getByClass(oParent, sClass){
        if(oParent.getElementsByClassName){
            return oParent.getElementsByClassName(sClass);
        }else{
            var aRes = [];
            var re = new RegExp('(^|\\s)' + sClass + '($|\\s)', 'i');
            var aEle = oParent.getElementsByTagName('*');
            for(var i = 0; i < aEle.length; i++){
                if(re.test(aEle[i].className)){
                    aRes.push(aEle[i]);
                }
            }
            return aRes;
        }
    }
}

</script>
</body>
</html>

 

posted @ 2015-02-20 19:03  格致诚正修齐治平  阅读(119)  评论(0)    收藏  举报