jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】

本文实例讲述了jQuery模拟实现经典FLASH导航动画效果的方法。分享给大家供大家参考，具体如下：

一、前言：

FLASH在中国互联网发展初期的时候非常的热，各种各样的矢量造型和动作，加上专门配制的音效，让很多人眼前一亮，并且让很多人迷上了这种新兴的媒体，那时候兴起了很多大大小小的专门发布FLASH的网站，印象中记得的像“FLASH闪吧”、“FLASH帝国”、“闪客天地”等这些都是很火很热的网站，在当时盛极一时，由此也产生了一大批的专门从事FLASH的开发者，我们时尚的称之为“闪客”。//是不是想到了某些动画片中的貌似隐者的那种习惯使用快剑的剑客呢？

我印象中比较出名的是的《小破孩》系列的动画，另外还有《鹿鼎记》、《大话西游》、《水浒Q传》等系列的做得非常精致的动画，在我那个情窦初开的年代，都专门买了光盘看了和收集了起来，还专门买了很多FLASH制作的书来学习，希望有一天也可以做出一个像样的作品，但是到现在为止也没有做出一个像样的作品，最多只能做一些图片加文字版的MV，惭愧啊。可以说，FLASH在那时候基本上是到达了顶峰时期。

从那以后，网络开始进入WEB2.0的时代，由于现代社会工作节奏的加快，FLASH的更新速度慢、开发的时间周期长、新的技术和应用不断涌现以及一些纯FLASH作品发布的站点不营利以及网络传送等带来的一系列的问题，辉煌的FLASH开始走下坡路，再也回复不到当年的辉煌时期了。尽管Macromedia公司最后在2005年被ADOBE收购，并且推出新的版本和3.0的AS，但也没法挽回下滑的局面。

到了今天，市场的份额已经远远回不到当年巅峰时期了，但仍有不少的人在孜孜不倦的研究和使用这个曾经带给我们那么多梦想和美好的FLASH，仍有不少优秀的作品在流传着，不管苹果放弃支持FLASH，或是在新的技术下，以后FLASH会退出舞台，但我们对FLASH都深存敬意。

哈哈，好像扯远了，回归正题。

二、正题

新的HTML5和CSS3的诞生后，有人预言FLASH会被这些新的技术取代，我觉得这个可能性不大，两者的方向不同，起码在目前的阶段还不用担心这个问题。

作为一名前端攻城狮认为，在我们的WEB开发中，FLASH的使用以尽量少用为妙，如一些FLASH的网站或是导航或其他页面的元素等，因为FLASH对搜索引擎不友好，搜索引擎无法抓取里面的内容，所以在我们的一般开发中，特别是大型的或门户的网站开发中都不使用FLASH，但是FLASH以其特别畅游的动画效果仍会吸引很大的一部分人来使用它来做网站整站或是一些效果。

在一些项目中，客户要求要某个站点上用FLASH效果来做导航，唯一的一个原因是觉得动画好看，但对于我们这些前端攻城狮，代码狂，一是不会做FLASH，二是直接将别人的FLASH拿下来也不合适，因为别人的是针对项目来开发的，里面有很多的AS也是和项目关联起来的，所以也拿下来了也无法使用，三是有SEO或是代码洁癖，喜欢折腾，总想通过其他各种不同的方法来实现，有不折腾到死也不会满足的心态，所以就有了下面的这样一个折腾——js模拟的flash导航效果折腾。

要折腾的效果如下图：

具体的效果请看DEMO ，点击此处打开。

像DEMO里的这个这样的FLASH导航，里面除了AS的一些条件的判断外，还有XML的脚本配置，真的是没有扎实的AS知识，想改造过来都很难，哈，还不如对脆直接模拟来做效果，且收录要比FLASH来得好哈。

想尝试用HTML5和CSS3应该可以实现的，但想想，浏览器的兼容性还是一个很大的问题，由于HTML5和CSS3项目中用得少，也比较菜，所以还是JS算了，但JS本身也非常的菜，JQuery略懂一些，就直接用JQuery来搞了，等以后浏览器都完美的支持HTML3和CSS3或我有空的时候，再来重新写一下这个效果哈。

说干就干，说做就做，首先来说一下思路。

这个分上下两个部分，上面是大分类，下面是二级分类，动画是一个向上，一个向下，动画利用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); // 向下滑动 - 隐藏
});

三、结语

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

总的来说，FLASH和模拟的各有优缺点，在不同的环境中各有千秋，没有好与不好的说法，只能说看需求和取舍，有时候，客户需要就是一定要这样搞，你也必须要这样搞，客户永远都是上帝，技术这些东西在某些人眼里就是一坨一坨的哈，但对于我个这样的一些对于代码乐此不倦折腾的的伪程序猿来说，虽然有技术的情结在里面，对于一些客户的需求也无可奈何，能让我们快乐的是在于折腾的过程和实现的喜悦并进行分享。你说是么？

完整demo实例代码点击此处本站下载。

（PS：本文在作者原文的基础上针对demo演示做了大量简化并提供了demo源码的下载，以期可以直接将最核心的部分展现给读者。）

希望本文所述对大家jQuery程序设计有所帮助。