js实现下拉菜单动画效果

来源：互联网发布：windows命令行编辑：程序博客网时间：2024/05/05 20:42
js实现下拉菜单动画效果

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>$Title$</title>    <style type="text/css">        .top-nav        {            font-size: 14px;            font-weight: bold;            list-style: none;        }        .top-nav li        {            float: left;            margin-right: 1px;        }        .top-nav li a        {            line-height: 34px;            text-decoration: none;            background: #3f240e;            color: #fff;            display: block;            width: 80px;            text-align: center;        }        .top-nav ul        {            list-style: none;            display: none;            padding: 0;            position: absolute;            height: 0;            overflow: hidden;        }        .top-nav li a:hover        {            background: url(http://img.imooc.com/5461b50d0001e28000010034.jpg) 0 0 repeat-x;        }        .note        {            color: #3f240e;            display: block;            background: url(http://img.imooc.com/5461b50d0001e28000010034.jpg) 0 0 repeat-x;        }        .corner        {            display: block;            height: 11px;            background: url(http://img.imooc.com/5461b5620001410d00170011.jpg) 31px 0 no-repeat;        }    </style>    <!--js实现-->    <script type="text/javascript">        var t_over,t_leave;        window.onload = function () {            var Lis = document.getElementsByTagName("li");            //鼠标经过时的效果            for(var i=0;i<Lis.length;i++){                Lis[i].onmouseover = function () {                    var u = this.getElementsByTagName("ul")[0];                    if (u != undefined) {                        u.style.display="block";                        clearTimeout(t_leave);                        ChangeH(u.id,1);                    }                };                Lis[i].onmouseleave = function () {                    var u = this.getElementsByTagName("ul")[0];                    if (u != undefined) {                        clearTimeout(t_over);                        ChangeH(u.id,-1);                    }                };            }        };        function ChangeH(id, count) {            //根据ID找到ulList，同时得到其高度            var ulList = document.getElementById(id);            var h = ulList.offsetHeight;            h += count;            if (count > 0) {                if (h <= 42) {                    //将高度赋值给ulList，同时，不断调用本函数                    ulList.style.height = h + "px";                    t_over = setTimeout("ChangeH('" + id + "',1)", 10);                }                else {                    return;                }            }            else {                if (h > 0) {                    //将高度赋值给ulList，同时，不断调用本函数                    ulList.style.height = h + "px";                    t_leave = setTimeout("ChangeH('" + id + "',-1)", 10);                }                else {                    ulList.style.display = "none";                    return;                }            }        }    </script>    <!--jQuery实现，有问题，只看思路-->    <!--<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>-->    <!--<script type="text/javascript">-->        <!--$(document).ready(function(){-->            <!--$(".top-nav li").mousemove(function(){-->                <!--$(this).find("ul").slideDown("1000");-->            <!--});-->            <!--$(".top-nav li").mouseleave(function(){-->                <!--$(this).find("ul").slideUp("slow");-->            <!--});-->        <!--})-->    <!--</script>--></head><body><ul class="top-nav">    <li><a href="#"><span class="note">Mijiang</span></a> </li>    <li><a href="#">课程大厅</a> </li>    <li><a href="#">学习中心</a>        <ul id="mnuUL">            <span class="corner"></span>            <li><a href="#">前端课程 </a></li>            <li><a href="#">手机开发</a> </li>            <li><a href="#">后台编程</a></li>        </ul>    </li>    <li><a href="#">关于我们</a></li></ul></body></html>
0 0