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相关内容感兴趣的读者可查看本站专题:《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

(0)

相关推荐

  • jQuery实现模拟flash头像裁切上传功能示例

    本文实例讲述了jQuery实现模拟flash头像裁切上传功能.分享给大家供大家参考,具体如下: 是的,jq已经有类似的插件了,或者干脆用flash算了,为什么我还要自己写?因为造(wo)轮(bu)子(hui)也(flash)是一个学习的过程,轮子不会造,将来怎么造飞机?先来一张最终效果图: 一.大概思路 用js来做这个效果,先得将图片A上传到服务器,关于异步上传的插件有很多,不用插件也可以参考本人上一篇博客用纯js的方式上传,上传之后显示到页面里,由于上传的图片尺寸各不相同,要完整地显示图片,就

  • js简单判断flash是否加载完成的方法

    本文实例讲述了js简单判断flash是否加载完成的方法.分享给大家供大家参考,具体如下: <script type="text/javascript"> //判定是否加载成功 function checkLoaded(flash){ try{ return Math.floor(flash.PercentLoaded()) == 100 }catch(e){ return false; } } var flash = 'flash对象'; var intervalID =

  • PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法

    本文实例讲述了PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法.分享给大家供大家参考,具体如下: 很多用户不知道如何复制flash地址,只能在程序中帮他们替换了: <?php /** * 支持优酷.土豆.腾讯视频html到swf转换 */ function convert_html_to_swf($url = '') { if(!is_string($url) || empty($url)) return ; if(strpos($url, 'swf')) return

  • php获取flash尺寸详细数据的方法

    本文实例讲述了php获取flash尺寸详细数据的方法.分享给大家供大家参考,具体如下: 有时我们的网站需要获取flash文件的尺寸信息,php有一个内置的函数可以实现,这个函数就是getimagesize,他可以返回图像的尺寸及文件类型的一个数组. 如果你还想着通过解析swf文件头信息来获取flash文件的尺寸信息,那真的有点走远了,因为从PHP 4开始已经内置getimagesize函数来做这个事,其功能测定任何 GIF,JPG,PNG,SWF,SWC,PSD,TIFF,BMP,IFF,JP2

  • H5实现仿flash效果的实现代码

    H5实现仿flash效果的实现代码 随着H5的火热,flash即将被H5所代替,如何利用H5实现flash的效果呢?我做了一个简单的小东西分享给大家. html和js部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/j

  • php+flash+jQuery多图片上传源码分享

    flash+php多图片上传的源码,测试成功,一个经典的上传源码,为什么要用flash作为上传的组件呢,其实这里不仅仅是flash,另加了jquery的技术,这样做的目的是为了更好更方便的管理图片,使用过QQ空间进行上传图片的童鞋都知道,QQ空间的上传体验度很好,而且管理我们上传的图片非常的方便,使用的技术基本上就是flash与jquery技术了. flash+jquery是作为前端图片上传展示的,还需要与php的结合才能将图片上传到指定的目标,这里的php一共有两个文件,一个upload.ph

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

    本文实例讲述了jQuery模拟实现经典FLASH导航动画效果的方法.分享给大家供大家参考,具体如下: 一.前言: FLASH在中国互联网发展初期的时候非常的热,各种各样的矢量造型和动作,加上专门配制的音效,让很多人眼前一亮,并且让很多人迷上了这种新兴的媒体,那时候兴起了很多大大小小的专门发布FLASH的网站,印象中记得的像"FLASH闪吧"."FLASH帝国"."闪客天地"等这些都是很火很热的网站,在当时盛极一时,由此也产生了一大批的专门从事FL

  • jQuery实现的导航动画效果(附demo源码)

    本文实例讲述了jQuery实现的导航动画效果.分享给大家供大家参考,具体如下: 经常在网上看到的,鼠标在导航上移动时,导航底部的横条会自动移动到鼠标悬浮的导航项上. 效果如下图: 利用jquery的 animate 函数,很好实现.代码很简单! 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <scrip

  • HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)

    本文实例讲述了HTML5游戏引擎LTweenLite实现的超帅动画效果.分享给大家供大家参考,具体如下: lufylegend.js是一个开源的HTML5游戏引擎,在游戏中往往会有各种的动画,这些动画有些是flash文件,有些是视频文件,本次就来利用lufylegend制作一个帅气的游戏动画,如下图. 测试连接如下: http://lufylegend.com/demo/effects01/ 一.准备工作 准备工作当然就是引擎的下载了. lufylegend.js引擎官网 http://lufy

  • jQuery实现横向带缓冲的水平运动效果(附demo源码下载)

    本文实例讲述了jQuery实现横向带缓冲的水平运动效果.分享给大家供大家参考,具体如下: 这里使用jQuery生成横向带缓冲的水平运动,用鼠标点一下才能激活,点一下以后可看到Div层在做水平运动,由此可派生出诸多的其它形式的动画效果. 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

  • jQuery实现的鼠标经过时变宽的效果(附demo源码)

    本文实例讲述了jQuery实现的鼠标经过时变宽的效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lan

  • HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)

    本文讲述了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果.分享给大家供大家参考,具体如下: 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用HTML5和jQuery插件Quicksand来创建一个超酷的星际争霸兵种效果图.希望大家喜欢! 先来看看效果图: HTML5代码 首先我们使用HTML5的代码来创建一个html文档,将所需的quicksand类库,及其jquery类库,还有HTML5类库倒入,如下: <!DOCTYPE h

  • jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】

    本文实例讲述了jQuery图片前后对比插件beforeAfter用法.分享给大家供大家参考,具体如下: 今天分享一款 jquery 插件--图片前后对比(beforeAfter),效果如下: 使用方法: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>图片前后对比</title> </head&g

  • jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)

    本文实例讲述了jQuery实现滚动鼠标放大缩小图片的方法.分享给大家供大家参考,具体如下: 在项目制作过程中,遇到了这么一个需求,就开发了一个,记录一下. 首先,需要定义html元素和css样式: <div style="position:relative;"> <asp:Image ID="myImg" runat="server" Width="670px" /> <span style=&q

  • jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)

    本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果.分享给大家供大家参考,具体如下: 该插件乃文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实际需求来设置是否添加左右切换图片的效果.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

  • jQuery控制li上下循环滚动插件用法实例(附demo源码下载)

    本文实例讲述了jQuery控制li上下循环滚动插件用法.分享给大家供大家参考,具体如下: /** * * jQuery scrollQ plugin li上下滚动插件 * @name jquery-scrollQ.js * @author Q * @date 2012-03-23 * line 显示li行数 * scrollNum 每次滚动li行数 * scrollTime 滚动速度 单位毫秒 * */ (function($){ var status = false; $.fn.scrollQ

随机推荐