jQuery模拟完美实现经典FLASH导航的动画效果[带演示源代码下载]

本文通过一个实例描述了jQuery仿真实现经典FLASH导航动画效果的方法。分享给大家参考，如下：

一、前言：

FLASH在中国互联网发展初期非常火爆。各种矢量形状和动作，加上专门制作的音效，让很多人眼前一亮，也让很多人对这种新媒体着迷。当时出现了很多专门发布FLASH的大大小小的网站。我记得“FLASH FLASH吧”“FLASH帝国”“FLASH世界”都是当时非常火爆的网站，在当时非常流行。//你有没有想到以前用快剑的剑客，在一些漫画里好像是隐士？

印象中《小破孩》系列动画比较出名，也有制作精美的《鹿鼎记》、《大话西游》、《水浒Q传》系列动画。在《爱的种子》的时候，我买了光盘来阅读和收藏，也买了很多FLASH做的书来学习。我希望有一天我能做一份体面的工作，但是到现在我还没有做一份体面的工作。可以说当时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不合适，因为别人的FLASH是为项目开发的，很多AS也是和项目有关联的，所以摘下来就不能用了。第三，有SEO或者代码洁癖，喜欢折腾，总想通过其他各种方法来实现，又有至死不折腾的心态，所以才有了这么一个折腾——js的模拟flash导航效果。

要抛出的效果如下：

具体效果请看DEMO，点击这里打开。

像DEMO中的这个FLasH导航，除了判断AS的一些条件外，还有XML的脚本配置，确实没有扎实的AS知识，转化起来非常困难。哈，直接模拟脆性做效果比较好，夹杂比FLASH好。

尝试使用HTML5和CSS3应该是可以的，但是想想，浏览器的兼容性还是一个很大的问题。因为HTML5和CSS3用的比较少，比较好吃，所以JS也很好吃。如果JQuery懂一点，直接用JQuery。之后浏览器会完美支持HTML3和CSS3或者在我有空的时候会重写这个效果。

照你说的做，照你说的做。先说思路。

这个分为两部分，上半部分是大分类，下半部分是二分类，动画是一上一下，动画可以用JQuery中的动画来完成。鼠标上下移动是由悬停事件触发的，基本涉及到这两个功能，其他小地方可以在实际过程中详细调整。

于是就有了下面这个基于JQuery的核心脚本(这段代码有点长，其实没什么特别的，和我们平时写的基本一样。请检查演示页面中的HTML和CSS，但不会因为使用图片而发布)

$('#navlia ')。wrap inner(' span class=' out '/span ')。追加(' span class=' BG '/span ')；$('#navlia ')。每个(函数(){ $(' span class=' over ' strong ' $(this))。text() '/strong/span ')。appendTo(这个)；});$('#navlia:not('。cur ')')。hover(function() { $(')。‘灭’，这个)。停止()。动画({'top':'65px'}，250)；//向下滑动-隐藏$('。结束了，这个)。停止()。动画({'top' :' 0px'}，250)；//向下滑动-显示$('。‘BG’，这个)。停止()。动画({'top' :' 0px'}，120)；//向下滑动-显示}，函数(){$('。‘灭’，这个)。停止()。动画({'top' :' 0px'}，250)；//上滑-显示$('。结束了，这个)。停止()。动画({'top' :' 65px'}，250)；//上滑-隐藏$(')。‘BG’，这个)。停止()。动画({'top' :' 65px'}，120)；//上滑-隐藏})；$(' # nav Li : not(' : first '): not(' : last ')')。hover(function() { $(')。nav BG’)。停止()。动画({'height':'44px'}，120)；$(这个)。孩子们。snav’)。停止(真)。css({'left':- $(this)。位置()。左})。show()；}，function() { $('。nav BG’)。停止()。动画({'height':'0px'}，120)；$(这个)。孩子们。snav’)。停止(真)。hide()；});$('.snava’)。wrap inner(' span class=' out '/span ')。追加(' span class=' BG '/span ')；$('.snava’)。每个(函数(){ $('span class='over'' $(this))。text() '/span ')。appendTo(这个)；});$(. snava : not('。cur ')')。hover(function() { $(')。‘灭’，这个)。停止()。动画({'top':'-44px'}，250)；//上滑-隐藏$('。结束了，这个)。停止()。动画({'top' :' 0px'}，250)；//上滑显示$('。‘BG’，这个)。停止()。动画({'top' :' 0px'}，120)；//上滑-显示}，函数(){$('。‘灭’，这个)。停止()。动画({'top' :' 0px'}，250)；//向下滑动-显示$('。结束了，这个)。停止()。动画({'top' :'-44px'}，250)；//向下滑动-隐藏$('。‘BG’，这个)。停止()。动画({'top' :'-44px'}，120)；//向下滑动-隐藏})；三.结论

虽然模拟效果和使用FLASH的效果还是有一定差距的，我个人认为效果可以达到FLASH的80%左右，但是基本上影响不大，对SEO有利，加载速度明显比FLASH快，所以我个人认为是可以接受的，但是有时候客户接受的话需要一些沟通。

总的来说，FLASH和模拟各有利弊，在不同的环境下各有利弊。没有好坏之分，只能说要看需求和取舍。有时候，客户需要这样做，你也必须这样做。客户永远是上帝，技术在一些人眼里是很多东西。但是，对于像我这样的一些伪程，虽然有技术情结在里面，你觉得呢？

单击此处下载完整的演示示例代码。

(PS:在作者原文的基础上，对演示演示做了很多简化，并提供了演示源代码的下载，以便将核心部分直接展示给读者。)

更多对jQuery感兴趣的读者，请查看本网站主题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》。

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