仿腾讯视频酷黑导航 nav/jquery 向下浮出

效果图:

 

代码:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <title>jquery nav 导航</title>
  5     <meta charset="utf-8" />
  6     <link rel="stylesheet" href="css/style.css" />
  7 </head>
  8 <body>
  9     <!--nav-box-->
 10     <div id="navBox">
 11         <nav>
 12             <!--left-->
 13             <div class="left-nav">
 14                 <img class="logo" src="img/logo.png" />
 15                 <ul>
 16                     <li><a href="#">首页</a></li>
 17                     <li><a href="#">电影</a></li>
 18                     <li><a href="#">电视剧</a></li>
 19                     <li><a href="#">综艺</a></li>
 20                     <li><a href="#">娱乐</a></li>
 21                     <li id="more-li">
 22                         <a href="#">更多</a><span class="downIcon"></span>
 23                     </li>
 24                 </ul>
 25                 <div class="more-box">
 26 
 27                 </div>
 28             </div>
 29             <div class="right-nav">
 30                 <ul>
 31                     <li><a href="#">登陆</a></li>
 32                     <li id="drapDown1"><a href="#">看过</a><span class="downIcon"></span></li>
 33                     <li id="drapDown2"><a href="#">收藏</a><span class="downIcon"></span></li>
 34                     <li><a href="#">上传</a></li>
 35                     <li>
 36                         <input placeholder="中国合伙人" class="search" type="text">
 37                     </li>
 38                 </ul>
 39                 <div id="hi1" class="hiddenBox">
 40                     <div class="setImg"><img src="img/up.png"/></div>
 41                     <div class="box-con">
 42                         是我! O(∩_∩)O哈哈~
 43                     </div>
 44                 </div>
 45                 <div id="hi2" class="hiddenBox">
 46                     <div class="setImg"><img src="img/up.png"/></div>
 47                     <div class="box-con">
 48                         不是我! O(∩_∩)O哈哈~
 49                     </div>
 50                 </div>
 51             </div>
 52         </nav>
 53     </div>
 54     <script src="js/jquery.js"></script>
 55 <script>
 56 $(document).ready(function(){
 57     $(#more-li).hover(function(){
 58         $(this).children(span)
 59             .removeClass(down-img-run-up)
 60             .addClass(down-img-run);
 61         $(#more-li).css({
 62             backgroundColor: #353535
 63         });
 64         $(.more-box).toggle(300,function(){
 65             var disp = $(.more-box)
 66                 .attr(style)
 67                 .split(:)[1].split(;)[0];
 68             if($.trim(disp) != block){
 69                 $(#more-li).css({
 70                     backgroundColor: ‘‘
 71                 });
 72                 $(.downIcon)
 73                     .removeClass(down-img-run)
 74                     .addClass(down-img-run-up);
 75             }
 76         });
 77     });
 78     $(.more-box).hover(function(){
 79         $(this).hide(200)
 80         $(.downIcon)
 81             .removeClass(down-img-run)
 82             .addClass(down-img-run-up);;
 83     });
 84 });
 85 
 86 $(document).ready(function(){
 87     $(.right-nav li[id]).hover(function(){
 88         //===获得ID标号
 89         var sId = $(this).attr(id);
 90         var num = sId.substring(8,sId.length);
 91         //===隐藏其他被选择元素 箭头向下
 92         for(var j = 1; j <= 2; j++){
 93             if(j!= num){
 94                 $(#hi+j).hide();
 95                 $(.downIcon)
 96                     .removeClass(down-img-run)
 97                     .addClass(down-img-run-up);
 98             }
 99         }
100         //===箭头向上
101         $(this).children(span)
102             .removeClass(down-img-run-up)
103             .addClass(down-img-run);
104         //===交替显示
105         $(#hi+num).fadeToggle(100,function(){
106             //===获得当前display属性值
107             var disp = $(this).attr(style)
108                 .split(:)[1].split(;)[0];
109             //===如果被隐藏 箭头向下
110             if($.trim(disp) != block){
111                 $(#drapDown+num)
112                     .children(span)
113                     .removeClass(down-img-run)
114                     .addClass(down-img-run-up);
115             }
116         });
117     });
118     //===点击下方框隐藏
119     $(.hiddenBox).hover(function(){
120         $(this).hide(200);
121         $(.downIcon)
122             .removeClass(down-img-run)
123             .addClass(down-img-run-up);
124     });
125 });
126 
127      </script>         
128 </body>
129 </html>


原文:http://www.oschina.net/code/snippet_1242866_34687

 

仿腾讯视频酷黑导航 nav/jquery 向下浮出,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。