毕业设计之车门式导航栏

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

 

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

/*
 *  GARAGEDOOR MENU
 *  A Javascript jQuery script by Gaya Kessler
 *  Version 1.0
 *  Date: 08-04-09
 *
 */

var GarageDoor = {

 scrollY: 0,
 scrollX: 0,

 setBindings: function(id) {
  $("#" + id + " .mouse").each(function(i){
   $(this).bind("mouseenter", function(e){//绑定事件，当鼠标移上去的时候，触发hideDoor事件
    GarageDoor.hideDoor(this);
   });
   $(this).bind("mouseleave", function(e){//绑定事件，当鼠标移上去的时候，触发showDoor事件
    GarageDoor.showDoor(this);
   });

   $(this).bind("click", function(e){//绑定事件，当鼠标移上去的时候，浏览器的地址为父节点的title中的值，这边可以自行修改
    window.location = this.parentNode.title;
   });
  });
 },
 //隐藏函数
 hideDoor: function(obj) {
  var xs = GarageDoor.scrollX;
  var ys = GarageDoor.scrollY;

  $(obj).parent().find(".overlay").each(function(i) {
   $(this).stop().animate({
    marginTop: ys + "px"
   }, 200);
  });
 },
 //显示函数
 showDoor: function(obj) {
  $(obj).parent().find(".overlay").each(function(i) {
   $(this).stop().animate({
    marginTop: "0px"
   }, 500);
  });
 }
}

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

<div class='garagedoor' id='garagedoor' style=" text-align:center; position:absolute">

        <div title='#' class='item'>
            <div class='underlay'>
                首页
            </div>
            <img src='images/menu/mcm_homepage.png' class='overlay' alt="" />
            <div class='mouse'>
                <img src='images/menu/nothing.gif' alt="" />&nbsp;</div>
        </div>
        <div title='#' class='item'>
            <div class='underlay'>
                新闻
            </div>
            <img src='images/menu/mcm_news.png' class='overlay' />
            <div class='mouse'>
                <img src='images/menu/nothing.gif' />&nbsp;</div>
        </div>

</div>
    <script type="text/javascript">
        GarageDoor.scrollY = -55;
        GarageDoor.scrollX = 0;
        GarageDoor.setBindings('garagedoor');//设置garagedoor
    </script>

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

车门式导航栏下载