基于JQuery模拟的FLASH导航动画效果实现代码

下面基于JQuery的核心脚本（这个代码有点长，其实没什么特别的地方，和我们平常写的基本一样，HTML和CSS请到DEMO页中查看，因有使用图片就不贴出来了这个分上下两个部分，上面是大分类，下面是二级分类，动画是一个向上，一个向下，动画利用JQuery中的animate可以做到，鼠标的移上和移出就是一个hover的事件进行触发，基本涉及的就主要是这两个函数了，其他的一些小地方就在实际的过程中进行细节调整就可以了。
　　于是就有了下面基于JQuery的核心脚本（这个代码有点长，其实没什么特别的地方，和我们平常写的基本一样，HTML和CSS请到DEMO页中查看，因有使用图片就不贴出来了）
核心代码如下

$("#nav>li>a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' ); 
$("#nav>li>a").each(function() { 
    $( '<span class="over"><strong>' +  $(this).text() + '</strong></span>' ).appendTo( this ); 
}); 
  
$("#nav>li>a:not('.cur')").hover(function() { 
    $(".out",this).stop().animate({'top':'65px'},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':'65px'},250); // 向上滑动 - 隐藏 
    $(".bg",this).stop().animate({'top':'65px'},120); // 向上滑动 - 隐藏 
}); 
  
$("#nav>li:not(':first'):not(':last')").hover(function() { 
    $(".navBg").stop().animate({'height':'44px'},120); 
    $(this).children(".snav").stop(true).css({"left":- $(this).position().left}).show(); 
}, function() { 
    $(".navBg").stop().animate({'height':'0px'},120); 
    $(this).children(".snav").stop(true).hide(); 
}); 
  
$(".snav>a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' ); 
$(".snav>a").each(function() { 
    $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this ); 
}); 
  
$(".snav>a:not('.cur')").hover(function() { 
    $(".out",this).stop().animate({'top':'-44px'},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':'-44px'},250); // 向下滑动 - 隐藏 
    $(".bg",this).stop().animate({'top':'-44px'},120); // 向下滑动 - 隐藏 
});

完整的实例代码如下

具体的HTML、CSS和脚本

<div class="navBox">
 <ul class="nav fr cf fw" id="nav">
  <li>
   <a class="cur" href="" target="_blank"><strong>首页</strong></a>
  </li>
  <li class="">
   <a href="#"><strong>公司简介</strong></a>
   <div class="snav">
    <a href="#" title="" class="cur">公司简介</a>
    <a href="#" title="">公司简介</a>
    <a href="#" title="">公司简介</a>
    <a href="#" title="">公司简介</a>
    <a href="#" title="">公司简介</a>
    <a href="#" title="">公司简介</a>
    <a href="#" title="">公司简介</a>
    <a href="#" title="">公司简介</a>
    <a href="#" title="">公司简介</a>
   </div>
  </li>
  <li>
   <a href="#" ><strong>产品展示</strong></a>
   <div class="snav">
    <a href="#" title="" class="cur">产品展示</a>
    <a href="#" title="">产品展示</a>
    <a href="#" title="">产品展示</a>
    <a href="#" title="">产品展示</a>
    <a href="#" title="">产品展示</a>
    <a href="#" title="">产品展示</a>
    <a href="#" title="">产品展示</a>
    <a href="#" title="">产品展示</a>
    <a href="#" title="">产品展示</a>
   </div>
  </li>
  <li>
   <a href="#" ><strong>资讯快报</strong></a>
   <div class="snav">
    <a href="#" title="" class="cur">资讯快报</a>
    <a href="#" title="">资讯快报</a>
    <a href="#" title="">资讯快报</a>
    <a href="#" title="">资讯快报</a>
    <a href="#" title="">资讯快报</a>
    <a href="#" title="">资讯快报</a>
    <a href="#" title="">资讯快报</a>
    <a href="#" title="">资讯快报</a>
    <a href="#" title="">资讯快报</a>
   </div>
  </li>
  <li>
   <a href="#" ><strong>产品评测</strong></a>
   <div class="snav">
    <a href="#" title="" class="cur">产品评测</a>
    <a href="#" title="">产品评测</a>
    <a href="#" title="">产品评测</a>
    <a href="#" title="">产品评测</a>
    <a href="#" title="">产品评测</a>
    <a href="#" title="">产品评测</a>
    <a href="#" title="">产品评测</a>
    <a href="#" title="">产品评测</a>
    <a href="#" title="">产品评测</a>
   </div>
  </li>
  <li>
   <a href="#" ><strong>新品推介</strong></a>
   <div class="snav">
    <a href="#" title="" class="cur">新品推介</a>
    <a href="#" title="">新品推介</a>
    <a href="#" title="">新品推介</a>
    <a href="#" title="">新品推介</a>
    <a href="#" title="">新品推介</a>
    <a href="#" title="">新品推介</a>
    <a href="#" title="">新品推介</a>
    <a href="#" title="">新品推介</a>
    <a href="#" title="">新品推介</a>
   </div>
  </li>
  <li>
   <a href="#" ><strong>客户服务</strong></a>
   <div class="snav">
    <a href="#" title="" class="cur">客户服务</a>
    <a href="#" title="">客户服务</a>
    <a href="#" title="">客户服务</a>
    <a href="#" title="">客户服务</a>
    <a href="#" title="">客户服务</a>
    <a href="#" title="">客户服务</a>
    <a href="#" title="">客户服务</a>
    <a href="#" title="">客户服务</a>
    <a href="#" title="">客户服务</a>
   </div>
  </li>
  <li><a href="" target="_blank"><strong>专业论坛</strong></a></li>
 </ul>
 <div class="navBg"></div>
</div>a{text-decoration:none;}
.navBox{border-bottom:2px solid #FF3C00; height:65px; position:relative; margin:0px 10px 50px; padding:0 0 0 10px;}
.nav { height:65px; position:relative; z-index:3}
.nav li { float:left; position:relative; text-align: center; }
.nav li a { float:left; position:relative; font-weight:bold; font-size:14px; color:#676767;  height:65px; line-height:65px; width:90px; overflow:hidden;  z-index:4:}
.nav li a span { position:absolute; left: 0; width: 90px; height:65px; cursor:pointer;}
.nav li a span.out { top:0px; }
.nav li a span strong { display:block; margin:0 10px; height:30px; line-height:30px; padding-top:20px; }
.nav li a span.over, .nav li a span.bg { top: 65px; }
.nav li a span.over { color:#FFF; }
.nav li a span.over strong { border-bottom:1px solid #FFFFD6; }
.nav li a span.bg { height: 65px; background:url(s/nav.jpg) repeat-x left bottom; }
.nav li a.cur span.over, .nav li a.cur span.bg { top: 0; }
.nav li .snav {font-size:0px; width:730px; height:44px; position:absolute; left:-200px; top:65px; border-top:2px solid #FF3C00; display:none;}
.nav li .snav a{ position:relative; margin:0 0px; width:70px; color:#444; height:44px; line-height:40px; display:inline-block; font-size:12px; font-weight:normal;}
.nav li .snav a span {position:absolute; left:0; width:70px; height:39px; line-height:39px; width:70px; cursor:pointer;}
.nav li .snav a span.out {top:0px;}
.nav li .snav a span.over,.nav li .snav a span.bg {top: -44px; }
.nav li .snav a span.over {color:#FFF;}
.nav li .snav a span.bg {height:44px; background:#FF510C; border-radius:0 0 5px 5px;}
.nav li .snav a.cur span.over,.nav li .snav a.cur span.bg {top: 0;}
.navBg { background:url(s/snavBg.jpg) no-repeat; width:1000px; height:0px; overflow:hidden; position:absolute; top:67px; left:0; text-align:center;  z-index:2; }$("#nav>li>a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
$("#nav>li>a").each(function() {
 $( '<span class="over"><strong>' +  $(this).text() + '</strong></span>' ).appendTo( this );
});
$("#nav>li>a:not('.cur')").hover(function() {
 $(".out",this).stop().animate({'top':'65px'},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':'65px'},250); // 向上滑动 - 隐藏
 $(".bg",this).stop().animate({'top':'65px'},120); // 向上滑动 - 隐藏
});
$("#nav>li:not(':first'):not(':last')").hover(function() {
 $(".navBg").stop().animate({'height':'44px'},120);
 $(this).children(".snav").stop(true).css({"left":- $(this).position().left}).show();
}, function() {
 $(".navBg").stop().animate({'height':'0px'},120);
 $(this).children(".snav").stop(true).hide();
});

$(".snav>a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
$(".snav>a").each(function() {
 $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
});
$(".snav>a:not('.cur')").hover(function() {
 $(".out",this).stop().animate({'top':'-44px'},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':'-44px'},250); // 向下滑动 - 隐藏
 $(".bg",this).stop().animate({'top':'-44px'},120); // 向下滑动 - 隐藏
});

结语
　　虽然模拟的效果与用FLASH的效果还有一定的差距，个人觉得效果能够达到FLASH的80%左右吧，但基本上影响不大，且利于SEO，且加载的速度也明显的比FLASH加载得快，所以个人觉得还可以接受，但有时候客户是否接受，就需要一些沟通了。