1. 程式人生 > >js庫實現的特效集合

js庫實現的特效集合

本文蒐集的是js庫實現的web特效,

1、Switchery

說明:Switchery是個簡單的JavaScript元件,只要幾個簡單的步驟就可以幫助使用者把預設的HTML複選框轉換成開關切換的風格

預覽:


2、morris 

說明:Morris.js是一個輕量級的JavaScript庫,使用jQuery和Raphaël來生成各種時序圖

預覽:





3、Turn.js

說明:Turn.js是一個JavaScript庫,能夠將HTML內容組織成看起來像一本真正的書籍或雜誌,用到HTML5的所有優點。Turn.js最合適基於HTML5實現類似雜誌,書籍,目錄的效果。它適用於大多數的瀏覽器和裝置,輕量級,只有10K

預覽:


4、metro ui css

說明:Metro UI CSS是一套用來建立類似於Windows 8 Metro UI風格網站的樣式, 它是一套自成體系的解決方案,但也可以與其它框架一起使用

預覽:(Sidebar為例)


5、Planetary.js

說明:Planetary.js是一個JavaScript庫,用於構建互動球體效果。它使用D3和TopoJSON解析和渲染地理資料。Planetary.js採用了基於外掛的架構,即使是預設的功能是作為外掛實現的,這使得Planetary.js非常靈活。Planetary.js是完全可定製,包括顏色,旋轉等等

預覽:


6、Math.js

說明:Math.js是一個JavaScript包,用於執行數學相關的函式。擁有非常多的運算功能和靈活的表示式解析器,功能強大且易於使用

預覽:


7、Yeoman

說明:Yeoman是一個開源專案,它為Web應用開發定義了一個自用的棧。它包括一批非常優秀的工具和框架,它們都有著完善的文件而且很權威。我們的目的是幫助開發者快速構建漂亮的Web應用

8、MouseTrap

說明:MouseTrap是個簡單的JavaScript庫,用來處理鍵盤快捷鍵,並且無需任何擴充套件依賴,而且非常輕量,壓縮包只有3.5KB

演示:

觸發快捷鍵前(* a)


連續按下* a 後


9、Hammer.js

說明:Hammer.js是一個輕量級的JavaScript庫(僅有2kb),能讓你的網站輕鬆實現觸控事件。它依賴於jQuery,

用來控制觸控裝置上的多點觸控特性

10、Headroom.js

說明:Headroom.js是一個輕量級,高效能的JavaScript外掛(無依賴性),允許你響應使用者的滾動行為。Headroom.js使您能夠在適當的時候把元素融入檢視,而其它時候讓內容成為焦點。Headroom.js簡單易用,它有一個純JavaScript API,以及可選的jQuery、Zepto和AngularJS相容的外掛

預覽:(滑鼠滾動時,出現圈住部分)


11、Wookmark jQuery plugin

說明:Wookmark jQuery plugin 是一個用來實現現在很流行的瀑布流的網頁佈局效果的 jQuery 外掛

預覽:


12、jQuery Corners 

說明:jQuery Corners 是一個用於建立漂亮圓角效果的jQuery外掛。不需要用到圖片或其它特殊的標籤

預覽:


13、InnerFade

說明:InnerFade這個jQuery外掛能夠讓任意一組元素(img,div等)實現淡入淡出播放效果

預覽:


14、Booklet

說明:Booklet可能是擁有最多選項的外掛。你可以通過鍵盤,連結,或者定時自動翻頁。每一頁都有一個單獨的URL,可以被收藏 預覽:

15、Flippage

說明:Flippage外掛可以將div中內容轉換為書籍樣式(實現翻頁)。它也可以用在觸控裝置上

預覽:


16、ferroSlider

說明:該外掛讓你可以用一個非同尋常非常酷的方式來編排網站的內容,並且通過一個滑動的方式來導航它們。最終效果類似於Mac或Linux的多重桌面

預覽(效果中的一種)


17、jQuery Extremes

說明:jQuery Extremes是一個極其簡單、輕量級的jQuery外掛,它使用CSS3的Rotate旋轉屬性,將元素旋轉並排成一圈,效果挺炫的

預覽:


18、jQuery pageSlide 

說明: 

jQuery pageSlide 是一個jQuery外掛,它可以控制一個隱藏頁面的顯示和關閉。具體來說,就是當前頁佔一個完整頁面,隱藏頁是看不到的,你設定一個控制的地方,點選該控 制時觸發事件,隱藏的頁面就彈出來。再次點選隱藏頁面以外的空間,它就又關閉。這適合在有限的空間裡,在主頁裡放重要內容,而隱藏頁放一些並不一定要顯示,而是有需要的使用者才去展開顯示的內容

預覽


19、ifvisible.js

說明:ifvisible.js 是一款跨瀏覽器,輕量級的 jQuery 外掛,用來檢測使用者是否在看當前頁面或者有沒有與當前頁面有相應的互動,使用者可以自定義等待的時間,也就是過多長時間沒有互動就自動關閉,一旦有互動又自動恢復原狀

20、Owl Carousel 

說明:Owl Carousel 是一款觸控啟動 jQuery 外掛,能建立響應式美麗的旋轉木馬滑動效果

預覽 

21、threesixty.js

說明 threesixty.js 是一個用來建立可 360 度旋轉的拖放物件

預覽 


22、Shake 

說明 Shake 是一個基於 jQuery 的抖動外掛,它能讓頁面上的元素抖動起來,就像是 QQ 的抖動視窗一樣。Shake 可以讓導航、圖片,甚至是頁面本身抖動起來,讓你的頁面富有動感、樂趣

預覽 


23、jquery.stamper

說明:一款在網頁上模擬現實中的蓋章效果的jQuery外掛

效果


24、jqFloat.js

說明 jqFloat.js 是一個 jQuery 的外掛用於實現頁面元素的浮動效果

效果


25、jquery.desktop

說明 基於jquery的web桌面元件

效果


更新中......