菜单栏子菜单缓慢下拉回收效果

前段时间一直想用这个功能，百度了好长时间也没找到，正好最近学了js，索性自己来写一下，纯js实现，可能写的也有瑕疵，欢迎指教

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="StyleSheet2.css" rel="stylesheet" />
    <script src="JavaScript2.js"></script>
</head>
<body>
    <div id="menu">
        <ul>
            <li class="main">
                <a href="#">1</a>
                <ul>
                    <li>
                        <a href="#">a</a>
                    </li>
                    <li>
                        <a href="#">b</a>
                    </li>
                    <li>
                        <a href="#">c</a>
                    </li>
                </ul>
            </li>
            <li class="main">
                <a href="#">2</a>
                <ul>
                    <li>
                        <a href="#">d</a>
                    </li>
                    <li>
                        <a href="#">e</a>
                    </li>
                    <li>
                        <a href="#">f</a>
                    </li>
                </ul>
            </li>
            <li class="main">
                <a href="#">3</a>
                <ul>
                    <li>
                        <a href="#">g</a>
                    </li>
                    <li>
                        <a href="#">h</a>
                    </li>
                    <li>
                        <a href="#">i</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

　　外部样式：

body {
    margin: 0px;
}

#menu{
    width: 302px;
    height: 35px;
    margin: 20px auto;
    background: red;
}

#menu ul{
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#menu ul li{
    float: left;
    width: 100px;
    line-height: 35px;
    text-align: center;
    border-right: 1px solid #ccc;
}

#menu ul li:last-child{    
    border-right: none;
}

#menu ul li a{
    text-decoration: none;
    font-size: 12px;
    width: 100px;
    height: 35px;
    display: block;
}

#menu .main ul{
    display: none;
    overflow: hidden;
    height: 0px;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#menu .main ul li{
    background: #ccc;
    width: 100px;
    height: 35px;
    border-bottom: 1px solid black;
}

　　js部分：

window.onload = function () {
    var fli = document.getElementsByClassName('main');    
    //alert(fli.length);
    for (var i=0; i<fli.length; i++) {
        var target = fli[i].getElementsByTagName('a')[0];
        var t = fli[i].getElementsByTagName('ul')[0];
        var li = t.getElementsByTagName('li');
        
        target.yidong = t;
        target.len = li.length;
        target.timer = null;
        target.onmouseover = function () {
            this.yidong.style.display = 'block';
            move(this.len*(35+1), this, this.yidong);
        };

        target.onmouseout = function () {
            move(0, this, this.yidong);
            //this.yidong.style.display = 'none';
        };
    }
};

function move(x, obj, t) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var speed = (x - t.offsetHeight) / 26;

        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);


        if (t.offsetHeight == x) {
            clearInterval(obj.timer);
        }
        else {       
            t.style.height = t.offsetHeight + speed + 'px';
        }

    }, 30);   
};

posted on 2017-08-15 19:31 南风丶丶阅读(517) 评论(0) 编辑收藏举报