毕业设计之车门式导航栏

漂亮的导航栏，开始的时候是标志性图片，当鼠标移到上面时，图片上移，文字说明显现。效果图如下：

实现的话是用jQuery实现的，有现成的插件。插件的js代码如下：

1. /*  
2.  *  GARAGEDOOR MENU   
3.  *  A Javascript jQuery script by Gaya Kessler  
4.  *  Version 1.0  
5.  *  Date: 08-04-09  
6.  *   
7.  */ 
8.  
9. var GarageDoor = {  
10.    
11.  scrollY: 0,  
12.  scrollX: 0,  
13.    
14.  setBindings: function(id) {  
15.   $("#" + id + " .mouse").each(function(i){  
16.    $(this).bind("mouseenter", function(e){//绑定事件，当鼠标移上去的时候，触发hideDoor事件  
17.     GarageDoor.hideDoor(this);  
18.    });  
19.    $(this).bind("mouseleave", function(e){//绑定事件，当鼠标移上去的时候，触发showDoor事件  
20.     GarageDoor.showDoor(this);  
21.    });  
22.      
23.    $(this).bind("click", function(e){//绑定事件，当鼠标移上去的时候，浏览器的地址为父节点的title中的值，这边可以自行修改  
24.     window.location = this.parentNode.title;  
25.    });  
26.   });  
27.  },  
28.  //隐藏函数  
29.  hideDoor: function(obj) {  
30.   var xs = GarageDoor.scrollX;  
31.   var ys = GarageDoor.scrollY;  
32.     
33.   $(obj).parent().find(".overlay").each(function(i) {  
34.    $(this).stop().animate({  
35.     marginTop: ys + "px" 
36.    }, 200);  
37.   });  
38.  },  
39.  //显示函数   
40.  showDoor: function(obj) {    
41.   $(obj).parent().find(".overlay").each(function(i) {  
42.    $(this).stop().animate({  
43.     marginTop: "0px" 
44.    }, 500);  
45.   });  
46.  }  
47. } 

上面的jquery已给出详细的解释，上面来看看html代码（只列举两个，详细的看附件）：

1. <div class='garagedoor' id='garagedoor' style=" text-align:center; position:absolute"> 
2.           
3.         <div title='#' class='item'> 
4.             <div class='underlay'> 
5.                 首页  
6.             </div> 
7.             <img src='images/menu/mcm_homepage.png' class='overlay' alt="" /> 
8.             <div class='mouse'> 
9.                 <img src='images/menu/nothing.gif' alt="" />&nbsp;</div> 
10.         </div> 
11.         <div title='#' class='item'> 
12.             <div class='underlay'> 
13.                 新闻  
14.             </div> 
15.             <img src='images/menu/mcm_news.png' class='overlay' /> 
16.             <div class='mouse'> 
17.                 <img src='images/menu/nothing.gif' />&nbsp;</div> 
18.         </div> 
19.  
20. </div> 
21.     <script type="text/javascript"> 
22.         GarageDoor.scrollY = -55;  
23.         GarageDoor.scrollX = 0;  
24.         GarageDoor.setBindings('garagedoor');//设置garagedoor  
25.     </script> 

ok，下面的是整个代码，能够独立运行

车门式导航栏下载