JQuery和CSS打造炫酷动感菜单(2)

http://www.itjxue.com  2015-08-06 23:07  来源:未知  点击次数: 

Step3 - JavaScript代码

首先要做的是,实现Step1中所说的,在DOM加载完成后修改其DOM结构,具体做法如下:

// 把每个a中的内容包含到一个层(span.out)中,
// 然后再在span.out层后面追加背景图层(span.bg)
$("#menu li a").wrapInner( '<span class="out"></span>' )
         .append( '<span class="bg"></span>' );
// 循环为菜单的a每个添加一个层(span.over)
$("#menu li a").each(function() {
  $( '<span class="over">' +  $(this).text() + '</span>' )
         .appendTo( this );
});

在讲动画代码之前,先看一下动画的过程,如下图所示:

在Step1中我们知道DOM加载后,a元素中建立了几个分隔层,在Step2中,CSS样式中,我们设置了span.bg和span.over层的top属性为-45px,因为span元素已设置为绝对定位,它将相对于li a 元素向上-45px,因为li元素内容超出不可见,所以开始时,.bg层和.over层位于空间范围外。

我们要设置的动画过程是,当鼠标悬停时,三个层同时向下移动,span.out层向下移动至移除可见范围,span.over和span.bg移动进入可见区域,设置span.bg速度比span.over速度稍快,错位产生更加效果。

要实现这样动画效果,使用jQuery的.animate()方法很容易就可以实现,以下是JS代码和解释:

$("#menu li a").hover(function() {
  // 鼠标悬停时候被触发的函数
   $(".out",this).stop().animate({'top':'45px'},250);//下滑至隐藏
   $(".over",this).stop().animate({'top':'0px'},250); //下滑至显示
   $(".bg",this).stop().animate({'top':'0px'},120); //下滑至显示
  }, function() {
   // 鼠标移出时候被触发的函数
   $(".out",this).stop().animate({'top':'0px'},250); //上滑至显示
   $(".over",this).stop().animate({'top':'-45px'},250);//上滑至隐藏
   $(".bg",this).stop().animate({'top':'-45px'},120);//上滑至隐藏
});

总结

以上讲解了如何一步步打造jQuery动态下滑菜单,您可以按部就班自己实现一个,也可以下载源代码修改定制,当然,您有什么好的提议或者有什么问题,都可以给我留言。

(责任编辑:IT教学网)

更多

推荐Javascript/Ajax文章