小菜毛毛技術(shù)分享

          與大家共同成長(zhǎng)

            BlogJava :: 首頁(yè) :: 聯(lián)系 :: 聚合  :: 管理
            164 Posts :: 141 Stories :: 94 Comments :: 0 Trackbacks

          圍剿 Flash 的不僅有 HTML 5,還有 JavaScript,著名的 JavaScript 框架 jQuery 在運(yùn)動(dòng)特效方面已經(jīng)越來(lái)越流暢,有時(shí)候你需要點(diǎn)一下右鍵來(lái)確認(rèn)它不是 Flash。本文介紹了10個(gè)非常出色的 jQuery 運(yùn)動(dòng)特效,這些效果可以更有效地展示你的內(nèi)容。

          1. 流感導(dǎo)航菜單

          下面的導(dǎo)航菜單,當(dāng)鼠標(biāo)在上面移動(dòng)的時(shí)候,會(huì)很流暢地垂下解釋菜單,當(dāng)你將鼠標(biāo)在上面快速左右移動(dòng)的時(shí)候,會(huì)懷疑這是 Flash。

          Fluid  Navigation – How to create an informative menu-bar with jQuery &  CSS

          2. 轉(zhuǎn)花燈

          Roundabout 是一個(gè) jQuery 插件,可以將一組 HTML 對(duì)象轉(zhuǎn)換為旋轉(zhuǎn)花燈的效果。

          Move  Elements with Style

          3. 拉洋片

          拉洋片也許是 jQuery 最拿手的效果了。該效果在遇到 JavaScript 被禁用的場(chǎng)合會(huì)自動(dòng)降級(jí)使用。

          Automatic Image Slider w/ CSS & jQuery

          4. jQuery Quicksand 插件

          這個(gè)讓人贊嘆的插件,可以對(duì)一組 HTML 對(duì)象重新洗牌,效果非常出眾。

            jQuery  Quicksand Plugin

            5. 導(dǎo)航滑塊

            這種風(fēng)格的導(dǎo)航已經(jīng)見(jiàn)于很多站點(diǎn),鼠標(biāo)在導(dǎo)航菜單上移動(dòng)的時(shí)候,一個(gè)高亮指示條隨著鼠標(biāo)滑動(dòng),指示當(dāng)前的導(dǎo)航位置。

            jQuery  Magic Line Sliding Style Navigation

            6. 文字的移動(dòng)紋理

            在文字上,顯示移動(dòng)的紋理,效果美輪美奐。原理是,做一個(gè)帶透明文字的 PNG 圖像放在一個(gè)容器里,容器的背景放一張圖案,用 jQuery 移動(dòng)容器的背景,很簡(jiǎn)單,不過(guò),不支持 IE6,因?yàn)?IE6 不支持 PNG。

            Text  with Moving Backgrounds

            7. jDiv: jQuery 導(dǎo)航 Tab

            一個(gè)可以顯示豐富內(nèi)容的下拉導(dǎo)航菜單(演示要翻墻)。

            jDiv: A  jQuery navigation menu alternative

            8. 基于 CSS3 和 jQuery 的半透明導(dǎo)航系統(tǒng)

            鼠標(biāo)在導(dǎo)航菜單上移動(dòng),顯示半透明的指示圖標(biāo)。CSS3 做這個(gè)實(shí)在太容易了。

            Halftone Navigation Menu With jQuery & CSS3

            9. 云臺(tái)式拉洋片

            常規(guī)的拉洋片效果要么左到右,要么右到左,或者垂直上下,這個(gè) jQuery 效果可以象云臺(tái)那樣掃鏡頭。

            Animate Panning Slideshow with jQuery

            10. SlideDeck

            SlideDeck 是一種新穎的內(nèi)容展示方式,有點(diǎn)類似 Outlook 的手風(fēng)琴菜單,但視覺(jué)效果和用戶體驗(yàn)更好一些。

            SlideDeck

            本文來(lái)源:http://devsnippets.com/article/10-jquery-transition-effects.html

             

            posted on 2010-03-03 09:11 小菜毛毛 閱讀(1233) 評(píng)論(0)  編輯  收藏 所屬分類: jQuery

            只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


            網(wǎng)站導(dǎo)航:
             
            主站蜘蛛池模板: 丹寨县| 台南市| 托里县| 绩溪县| 梅河口市| 西藏| 济阳县| 龙陵县| 图们市| 重庆市| 苏尼特右旗| 乐至县| 班玛县| 改则县| 礼泉县| 华阴市| 尖扎县| 东兰县| 古丈县| 福州市| 高雄市| 甘肃省| 松滋市| 丹东市| 偏关县| 梧州市| 东辽县| 洛扎县| 万安县| 绥德县| 巴彦县| 简阳市| 阿拉善右旗| 达尔| 万安县| 汝州市| 萨迦县| 安康市| 城市| 定州市| 天祝|