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


Posted in Javascript onNovember 09, 2016

本文实例讲述了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导航效果折腾。

要折腾的效果如下图:

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

具体的效果请看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程序设计有所帮助。

Javascript 相关文章推荐
javascript web对话框与弹出窗口
Feb 22 Javascript
angularJS 中input示例分享
Feb 09 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
json传值以及ajax接收详解
May 24 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
微信小程序  modal详解及实例代码
Nov 09 #Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 #Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 #Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 #Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 #Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 #Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 #Javascript
You might like
我的论坛源代码(四)
2006/10/09 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
JSON的parse()方法介绍
2019/01/31 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
Python过滤列表用法实例分析
2016/04/29 Python
使用Python实现简单的服务器功能
2017/08/25 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
Python json转字典字符方法实例解析
2020/04/13 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
暑假实习求职信范文
2013/09/22 职场文书
跟单文员的岗位职责
2013/11/14 职场文书
职称评定自我鉴定
2014/03/18 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
教你用python控制安卓手机
2021/05/13 Python
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js