js实现尖角动画菜单

最新推荐文章于 2022-06-04 16:50:30 发布

仰望星空的包子

最新推荐文章于 2022-06-04 16:50:30 发布

阅读量626

点赞数

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/sinat_21206105/article/details/67636159

版权

JavaScript学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

今天做了一个二级菜单，主要运营了js的定时器和高度属性以及遍历。代码贴出来，希望对大家有帮助了！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
    <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.mukewang.com/5461b50d0001e28000010034.jpg) 0 0 repeat-x;
        }
        .note
        {
            color: #3f240e;
            display: block;
            background: url(http://img.mukewang.com/5461b50d0001e28000010034.jpg) 0 0 repeat-x;
        }
        .corner
        {
            display: block;
            height: 11px;
            background: url(http://img.mukewang.com/5461b5620001410d00170011.jpg) 31px 0 no-repeat;
        }
    </style>
    <script type="text/javascript">
      window.οnlοad=function(){
          var lis=document.getElementsByTagName('li');
          for(var i=0;i<lis.length;i++){

              lis[i].οnmοuseοver=function(){
                  var u=this.getElementsByTagName('ul')[0];
                  if(u!=undefined){

                    u.style.display='block';
                  changeH(u.id,1);
                  }
              }
              lis[i].οnmοuseleave=function(){
                var u=this.getElementsByTagName('ul')[0];
                 if(u!=undefined){
                    // u.style.display='block';
                  changeH(u.id,-1);
                  }
              }
              
          }
      }
      var timer=null;
     function changeH(id,count){
      if(timer){clearTimeout(timer);timer=null;}
         var li=document.getElementById(id);
         var h=li.offsetHeight;
          h+=count;
        if(count>0){
          
         if(h<=45){
             li.style.height=h+'px';
            timer= setTimeout("changeH('"+id+"',1)",10);
         }
         else{
          return ;
         }        
         
     }
     else{
      if(h>0){
        // h-=count;
        li.style.height=h+'px';
       timer= setTimeout("changeH('"+id+"',-1)",10);
        // alert(li);
      }
      else{
        li.style.display='none';
        return;
      }
     }

     }
    
    </script>
</head>
<body>
    <ul class="top-nav">
        <li><a href="#"><span class="note">慕课网</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>