漂亮的导航栏,开始的时候是标志性图片,当鼠标移到上面时,图片上移,文字说明显现。效果图如下:
实现的话是用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='p_w_picpaths/menu/mcm_homepage.png' class='overlay' alt="" />
- <div class='mouse'>
- <img src='p_w_picpaths/menu/nothing.gif' alt="" /> </div>
- </div>
- <div title='#' class='item'>
- <div class='underlay'>
- 新闻
- </div>
- <img src='p_w_picpaths/menu/mcm_news.png' class='overlay' />
- <div class='mouse'>
- <img src='p_w_picpaths/menu/nothing.gif' /> </div>
- </div>
- </div>
- <script type="text/javascript">
- GarageDoor.scrollY = -55;
- GarageDoor.scrollX = 0;
- GarageDoor.setBindings('garagedoor');//设置garagedoor
- </script>
ok,下面的是整个代码,能够独立运行