jQuery模擬完美實(shí)現(xiàn)經(jīng)典FLASH導(dǎo)航動(dòng)畫效果【附demo源碼下載】
本文實(shí)例講述了jQuery模擬實(shí)現(xiàn)經(jīng)典FLASH導(dǎo)航動(dòng)畫效果的方法。分享給大家供大家參考,具體如下:
一、前言:
FLASH在中國(guó)互聯(lián)網(wǎng)發(fā)展初期的時(shí)候非常的熱,各種各樣的矢量造型和動(dòng)作,加上專門配制的音效,讓很多人眼前一亮,并且讓很多人迷上了這種新興的媒體,那時(shí)候興起了很多大大小小的專門發(fā)布FLASH的網(wǎng)站,印象中記得的像“FLASH閃吧”、“FLASH帝國(guó)”、“閃客天地”等這些都是很火很熱的網(wǎng)站,在當(dāng)時(shí)盛極一時(shí),由此也產(chǎn)生了一大批的專門從事FLASH的開發(fā)者,我們時(shí)尚的稱之為“閃客”。//是不是想到了某些動(dòng)畫片中的貌似隱者的那種習(xí)慣使用快劍的劍客呢?
我印象中比較出名的是的《小破孩》系列的動(dòng)畫,另外還有《鹿鼎記》、《大話西游》、《水滸Q傳》等系列的做得非常精致的動(dòng)畫,在我那個(gè)情竇初開的年代,都專門買了光盤看了和收集了起來,還專門買了很多FLASH制作的書來學(xué)習(xí),希望有一天也可以做出一個(gè)像樣的作品,但是到現(xiàn)在為止也沒有做出一個(gè)像樣的作品,最多只能做一些圖片加文字版的MV,慚愧啊??梢哉f,F(xiàn)LASH在那時(shí)候基本上是到達(dá)了頂峰時(shí)期。
從那以后,網(wǎng)絡(luò)開始進(jìn)入WEB2.0的時(shí)代,由于現(xiàn)代社會(huì)工作節(jié)奏的加快,F(xiàn)LASH的更新速度慢、開發(fā)的時(shí)間周期長(zhǎng)、新的技術(shù)和應(yīng)用不斷涌現(xiàn)以及一些純FLASH作品發(fā)布的站點(diǎn)不營(yíng)利以及網(wǎng)絡(luò)傳送等帶來的一系列的問題,輝煌的FLASH開始走下坡路,再也回復(fù)不到當(dāng)年的輝煌時(shí)期了。盡管Macromedia公司最后在2005年被ADOBE收購,并且推出新的版本和3.0的AS,但也沒法挽回下滑的局面。
到了今天,市場(chǎng)的份額已經(jīng)遠(yuǎn)遠(yuǎn)回不到當(dāng)年巔峰時(shí)期了,但仍有不少的人在孜孜不倦的研究和使用這個(gè)曾經(jīng)帶給我們那么多夢(mèng)想和美好的FLASH,仍有不少優(yōu)秀的作品在流傳著,不管蘋果放棄支持FLASH,或是在新的技術(shù)下,以后FLASH會(huì)退出舞臺(tái),但我們對(duì)FLASH都深存敬意。
哈哈,好像扯遠(yuǎn)了,回歸正題。
二、正題
新的HTML5和CSS3的誕生后,有人預(yù)言FLASH會(huì)被這些新的技術(shù)取代,我覺得這個(gè)可能性不大,兩者的方向不同,起碼在目前的階段還不用擔(dān)心這個(gè)問題。
作為一名前端攻城獅認(rèn)為,在我們的WEB開發(fā)中,F(xiàn)LASH的使用以盡量少用為妙,如一些FLASH的網(wǎng)站或是導(dǎo)航或其他頁面的元素等,因?yàn)镕LASH對(duì)搜索引擎不友好,搜索引擎無法抓取里面的內(nèi)容,所以在我們的一般開發(fā)中,特別是大型的或門戶的網(wǎng)站開發(fā)中都不使用FLASH,但是FLASH以其特別暢游的動(dòng)畫效果仍會(huì)吸引很大的一部分人來使用它來做網(wǎng)站整站或是一些效果。
在一些項(xiàng)目中,客戶要求要某個(gè)站點(diǎn)上用FLASH效果來做導(dǎo)航,唯一的一個(gè)原因是覺得動(dòng)畫好看,但對(duì)于我們這些前端攻城獅,代碼狂,一是不會(huì)做FLASH,二是直接將別人的FLASH拿下來也不合適,因?yàn)閯e人的是針對(duì)項(xiàng)目來開發(fā)的,里面有很多的AS也是和項(xiàng)目關(guān)聯(lián)起來的,所以也拿下來了也無法使用,三是有SEO或是代碼潔癖,喜歡折騰,總想通過其他各種不同的方法來實(shí)現(xiàn),有不折騰到死也不會(huì)滿足的心態(tài),所以就有了下面的這樣一個(gè)折騰——js模擬的flash導(dǎo)航效果折騰。
要折騰的效果如下圖:
具體的效果請(qǐng)看DEMO ,點(diǎn)擊此處打開。
像DEMO里的這個(gè)這樣的FLASH導(dǎo)航,里面除了AS的一些條件的判斷外,還有XML的腳本配置,真的是沒有扎實(shí)的AS知識(shí),想改造過來都很難,哈,還不如對(duì)脆直接模擬來做效果,且收錄要比FLASH來得好哈。
想嘗試用HTML5和CSS3應(yīng)該可以實(shí)現(xiàn)的,但想想,瀏覽器的兼容性還是一個(gè)很大的問題,由于HTML5和CSS3項(xiàng)目中用得少,也比較菜,所以還是JS算了,但JS本身也非常的菜,JQuery略懂一些,就直接用JQuery來搞了,等以后瀏覽器都完美的支持HTML3和CSS3或我有空的時(shí)候,再來重新寫一下這個(gè)效果哈。
說干就干,說做就做,首先來說一下思路。
這個(gè)分上下兩個(gè)部分,上面是大分類,下面是二級(jí)分類,動(dòng)畫是一個(gè)向上,一個(gè)向下,動(dòng)畫利用JQuery中的animate可以做到,鼠標(biāo)的移上和移出就是一個(gè)hover的事件進(jìn)行觸發(fā),基本涉及的就主要是這兩個(gè)函數(shù)了,其他的一些小地方就在實(shí)際的過程中進(jìn)行細(xì)節(jié)調(diào)整就可以了。
于是就有了下面基于JQuery的核心腳本(這個(gè)代碼有點(diǎn)長(zhǎng),其實(shí)沒什么特別的地方,和我們平常寫的基本一樣,HTML和CSS請(qǐng)到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); // 向下滑動(dòng) - 隱藏 $(".over",this).stop().animate({'top':'0px'},250); // 向下滑動(dòng) - 顯示 $(".bg",this).stop().animate({'top':'0px'}, 120); // 向下滑動(dòng) - 顯示 }, function() { $(".out",this).stop().animate({'top':'0px'},250); // 向上滑動(dòng) - 顯示 $(".over",this).stop().animate({'top':'65px'},250); // 向上滑動(dòng) - 隱藏 $(".bg",this).stop().animate({'top':'65px'},120); // 向上滑動(dòng) - 隱藏 }); $("#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); // 向上滑動(dòng) - 隱藏 $(".over",this).stop().animate({'top':'0px'},250); // 向上滑動(dòng) - 顯示 $(".bg",this).stop().animate({'top':'0px'}, 120); // 向上滑動(dòng) - 顯示 }, function() { $(".out",this).stop().animate({'top':'0px'},250); // 向下滑動(dòng) - 顯示 $(".over",this).stop().animate({'top':'-44px'},250); // 向下滑動(dòng) - 隱藏 $(".bg",this).stop().animate({'top':'-44px'},120); // 向下滑動(dòng) - 隱藏 });
三、結(jié)語
雖然模擬的效果與用FLASH的效果還有一定的差距,個(gè)人覺得效果能夠達(dá)到FLASH的80%左右吧,但基本上影響不大,且利于SEO,且加載的速度也明顯的比FLASH加載得快,所以個(gè)人覺得還可以接受,但有時(shí)候客戶是否接受,就需要一些溝通了。
總的來說,F(xiàn)LASH和模擬的各有優(yōu)缺點(diǎn),在不同的環(huán)境中各有千秋,沒有好與不好的說法,只能說看需求和取舍,有時(shí)候,客戶需要就是一定要這樣搞,你也必須要這樣搞,客戶永遠(yuǎn)都是上帝,技術(shù)這些東西在某些人眼里就是一坨一坨的哈,但對(duì)于我個(gè)這樣的一些對(duì)于代碼樂此不倦折騰的的偽程序猿來說,雖然有技術(shù)的情結(jié)在里面,對(duì)于一些客戶的需求也無可奈何,能讓我們快樂的是在于折騰的過程和實(shí)現(xiàn)的喜悅并進(jìn)行分享。你說是么?
完整demo實(shí)例代碼點(diǎn)擊此處本站下載。
(PS:本文在作者原文的基礎(chǔ)上針對(duì)demo演示做了大量簡(jiǎn)化并提供了demo源碼的下載,以期可以直接將最核心的部分展現(xiàn)給讀者。)
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
Jquery實(shí)現(xiàn)圖片放大鏡效果的思路及代碼(自寫)
放大鏡類的文章網(wǎng)上有很多,由于實(shí)現(xiàn)起來比較麻煩,所以自己寫了一個(gè),下面為大家分享下具體的算法及實(shí)現(xiàn)代碼,感興趣的朋友可以參考下2013-10-10基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名是否存在的實(shí)現(xiàn)代碼
基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名是否存在的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-04-04如何使用jQuery來處理圖片壞鏈具體實(shí)現(xiàn)步驟
也就是說如果這個(gè)圖片沒有加載成功了會(huì)怎么辦,下面為大大家分享下如何處理裂圖,感興趣的朋友可以參考下哈,希望對(duì)你有所幫助2013-05-05基于jQuery架構(gòu)javascript基礎(chǔ)體系
jQuery畢竟還只是一個(gè)基礎(chǔ)的最底層的工具集,封裝元素選擇器,事件等等,基本上能滿足一般的需求,但要從整體的WEB的周度來看,為了提高javascript開發(fā)的效率與可重用性,就需要有一個(gè)整體的布局2011-01-01PHP結(jié)合jQuery實(shí)現(xiàn)紅藍(lán)投票功能特效
本文給大家分享的是jQuery + PHP+mysql完成的投票程序,功能不是太復(fù)雜,主要是效果非常不錯(cuò),有需要的小伙伴可以參考下2015-07-07jQuery UI庫中dialog對(duì)話框功能使用全解析
這篇文章主要介紹了jQuery UI庫中dialog對(duì)話框功能使用全解析,文中列舉了各種常用的dialog屬性,整理得很全面,需要的朋友可以參考下2016-04-04基于jquery實(shí)現(xiàn)的鼠標(biāo)懸停提示案例
本文主要介紹了基于jquery實(shí)現(xiàn)的鼠標(biāo)懸停提示的詳細(xì)案例。代碼全面,功能實(shí)用,需要的朋友可以參考借鑒2016-12-12javascript中對(duì)Attr(dom中屬性)的操作示例講解
這篇文章主要是對(duì)javascript中對(duì)Attr(dom中屬性)的操作進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12