js庫實現的特效集合

本文轉載自查看原文 2020-09-15 10:53 882 其他

本文搜集的是js庫實現的web特效，

1、Switchery

說明:Switchery是個簡單的JavaScript組件，只要幾個簡單的步驟就可以幫助用戶把默認的HTML復選框轉換成開關切換的風格

預覽：

官方地址: http://abpetkov.github.io/switchery/

2、morris

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

預覽：

官方地址 http://www.oesmith.co.uk/morris.js/

3、Turn.js

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

預覽：

官方地址 http://www.turnjs.com/#samples/steve-jobs

4、metro ui css

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

預覽：（Sidebar為例）

官方地址 http://metroui.org.ua/

5、Planetary.js

說明：Planetary.js是一個JavaScript庫，用於構建互動球體效果。它使用D3和TopoJSON解析和渲染地理數據。Planetary.js采用了基於插件的架構，即使是默認的功能是作為插件實現的，這使得Planetary.js非常靈活。Planetary.js是完全可定制，包括顏色，旋轉等等

預覽：

官方地址：http://planetaryjs.com/examples/rotating.html

6、Math.js

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

預覽：

官方地址 http://mathjs.org/

7、Yeoman

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

具體解釋見：http://www.36ria.com/6144

8、MouseTrap

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

演示：

觸發快捷鍵前(* a)

連續按下* a 后

官方地址 http://craig.is/killing/mice

9、Hammer.js

說明：Hammer.js是一個輕量級的JavaScript庫（僅有2kb），能讓你的網站輕松實現觸控事件。它依賴於jQuery，

用來控制觸摸設備上的多點觸控特性

官方地址是 http://eightmedia.github.io/hammer.js/

10、Headroom.js

說明：Headroom.js是一個輕量級，高性能的JavaScript插件（無依賴性），允許你響應用戶的滾動行為。Headroom.js使您能夠在適當的時候把元素融入視圖，而其它時候讓內容成為焦點。Headroom.js簡單易用，它有一個純JavaScript API，以及可選的jQuery、Zepto和AngularJS兼容的插件

預覽：(鼠標滾動時，出現圈住部分)

官方地址 http://wicky.nillia.ms/headroom.js/

11、Wookmark jQuery plugin

說明：Wookmark jQuery plugin 是一個用來實現現在很流行的瀑布流的網頁布局效果的 jQuery 插件

預覽：

官方地址 http://www.wookmark.com/jquery-plugin

12、jQuery Corners

說明：jQuery Corners 是一個用於創建漂亮圓角效果的jQuery插件。不需要用到圖片或其它特殊的標簽

預覽:

官方地址 http://jquery.malsup.com/corner/

13、InnerFade

說明：InnerFade這個jQuery插件能夠讓任意一組元素（img，div等）實現淡入淡出播放效果

預覽：

參考地址 http://medienfreunde.com/lab/innerfade/

14、Booklet

說明：Booklet可能是擁有最多選項的插件。你可以通過鍵盤，鏈接，或者定時自動翻頁。每一頁都有一個單獨的URL，可以被收藏

預覽：

地址: http://builtbywill.com/code/booklet/demos/

15、Flippage

說明：Flippage插件可以將div中內容轉換為書籍樣式（實現翻頁）。它也可以用在觸控設備上

預覽：

地址：http://marcbuils.github.io/Flippage/

16、ferroSlider

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

預覽(效果中的一種)

demo地址 http://www.alessandroferrini.it/lab/jQueryPlugins/ferroSlider/docs/docs.php#demos

17、jQuery Extremes

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

預覽：

地址：http://duopixel.com/extremes/

18、jQuery pageSlide

說明：

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

預覽