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></span>' ).append( '<span></span>' ); $("#nav>li>a").each(function() { $( '<span><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></span>' ).append( '<span></span>' ); $(".snav>a").each(function() { $( '<span>' + $(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); // 向下滑动 - 隐藏 });
三、结语