期待已久的2012年度最佳 jQuery 插件揭晓
期待已久的2012年度最佳 jQuery 插件揭曉
讓人期待已久的2012年度最佳 jQuery 插件終于發(fā)布了。jQuery?自2006年發(fā)布以來，經(jīng)過6年的迅速發(fā)展，目前已是最流行和使用最廣泛的 JavaScript 框架，這主要?dú)w功于眾多圍繞 jQuery 的技術(shù)社區(qū)。jQuery?社區(qū)的開發(fā)者持續(xù)不斷的在發(fā)布各種 jQuery 插件，Web 開發(fā)人員能夠非常輕松把一些驚艷的功能到項(xiàng)目中。推薦閱讀：《2011年度最佳 jQuery 插件》。
Arctext.js
Arctext.js 是基于 Lettering.js 的文字旋轉(zhuǎn)插件，根據(jù)設(shè)置的旋轉(zhuǎn)半徑準(zhǔn)確計(jì)算每個(gè)字母的旋轉(zhuǎn)弧度并均勻分布。
雖然 CSS3 也能夠?qū)崿F(xiàn)字符旋轉(zhuǎn)效果，但是要讓安排每個(gè)字母都沿著彎曲路徑排布相當(dāng)?shù)膹?fù)雜，Arctext.js 則可以輕松實(shí)現(xiàn)。
可以通過設(shè)置下面四個(gè)參數(shù)調(diào)整效果：
?| 1 2 3 4 | radius? /* 旋轉(zhuǎn)的半徑，最小值是字符長度的一半，如果設(shè)置為-1，則文本是直的，不會(huì)旋轉(zhuǎn)。默認(rèn)值是0 */ dir???? /* 旋轉(zhuǎn)方向，1是向下，-1是向上。默認(rèn)值是1 */ rotate? /* 設(shè)置為true表示每個(gè)字符都旋轉(zhuǎn)。默認(rèn)值是true */ fitText /* 如果想使用fitText插件(http://fittextjs.com/)，則需要設(shè)置為true。默認(rèn)值是false */ |
在線演示 ? ? ×××
?
stellar.js
正如它的口號(hào)所說：Parallax has never been easier，的確，它能幫助輕松的實(shí)現(xiàn)網(wǎng)頁視差滾動(dòng)效果。
給標(biāo)簽添加data屬性（data-stellar-ratio等，使用方法參考幫助文檔），然后運(yùn)行$.stellar()就可以看到很酷的時(shí)差滾動(dòng)效果了。
?| 1 2 3 4 | // For example: $(window).stellar(); // or: $('#main').stellar(); |
還可以通過設(shè)置偏移量來調(diào)整時(shí)差效果：
?| 1 2 3 4 | $.stellar({ ??horizontalOffset: 40, ??verticalOffset: 150 }); |
也可以為元素添加data屬性來配置每個(gè)元素的偏移，例如：
?| 1 2 3 | <div data-stellar-ratio="2" ?????data-stellar-horizontal-offset="40" ?????data-stellar-vertical-offset="150"> |
在線演示 ? ? 插件下載
?
Get turn.js
這款 jQuery 插件能夠給頁面添加漂亮的過渡（transition）效果，類似于書本或者雜志。
主要特色
- ? ?支持運(yùn)行于 iPad 和 iPhone；
- ? ?簡單，美觀和強(qiáng)大的 API 接口；
- ? ?可以通過 Ajax 動(dòng)態(tài)加載頁面；
- ? ?純 HTML5/CSS3 呈現(xiàn)頁面內(nèi)容；
- ? ?提供兩種漂亮的過渡（transition）效果；
- ? ?借助 turn.html4.js，可以在 IE8 等低版本瀏覽器工作。
使用非常簡單，示例代碼：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div id="flipbook"> ????<div class="hard"> Turn.js </div> ????<div class="hard"></div> ????<div> Page 1 </div> ????<div> Page 2 </div> ????<div> Page 3 </div> ????<div> Page 4 </div> ????<div class="hard"></div> ????<div class="hard"></div> </div> <script type="text/javascript"> ????$("#flipbook").turn({ ????????width: 400, ????????height: 300, ????????autoCenter: true ????}); </script> |
在線演示?? ??插件下載
?
Flexslider 2.0
FlexSlider 是一款輕量的響應(yīng)式 jQuery 內(nèi)容滾動(dòng)插件，能夠幫助你在項(xiàng)目輕松的創(chuàng)建漂亮的內(nèi)容滾動(dòng)效果。
這款插件也是 2011 年度最佳 jQuery 插件，今年被?WooThemes 收購并發(fā)布了2.0版本，因此繼續(xù)入選 2012 年度榜單。
主要特色
- ? ?簡單的，語義化的標(biāo)簽；
- ? ?支持所有主流的瀏覽器；
- ? ?水平/垂直滑動(dòng)和淡入淡出動(dòng)畫；
- ? ?支持多個(gè)滑塊，回調(diào) API，以及更多；
- ? ?觸摸滑動(dòng)支持硬件加速；
- ? ?能夠自定義導(dǎo)航選項(xiàng)。
- ? ?兼容最新版本的 jQuery。
使用非常簡單，示例代碼：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class="flexslider"> ??<ul class="slides"> ????<li> ??????<img src="slide1.jpg" /> ????</li> ????<li> ??????<img src="slide2.jpg" /> ????</li> ????<li> ??????<img src="slide3.jpg" /> ????</li> ??</ul> </div> <script type="text/javascript" charset="utf-8"> ??$(window).load(function() { ????$('.flexslider').flexslider(); ??}); </script> |
在線演示?? ??插件下載
?
hammer.js
Hammer.js 是一個(gè)基于 jQuery，在網(wǎng)頁中實(shí)現(xiàn)多點(diǎn)觸摸 JavaScript 庫。
支持 Tap、Double Tap、Drag、Hold、Swipe 和 Transform 六種觸摸手勢。?
主要特色
- ? ?在網(wǎng)站中快速實(shí)現(xiàn) Touch 事件；
- ? ?輕量，GZIP 壓縮后只有2KB；
- ? ?功能專注，專用于多點(diǎn)觸摸手勢；
- ? ?完全獨(dú)立的庫，也提供了 jQuery 插件版本；
詳細(xì)使用幫助可參考插件的Github主頁，下面是簡單示例：
?| 1 2 3 4 5 6 7 | $("#element") ???.hammer({ ????????// options... ???}) ???.bind("tap", function(ev) { ????????console.log(ev); ???}); |
在線演示?? ??插件下載
?
iPicture
iPicture 是一款用于制作交互式照片效果的 jQuery 插件，可以在圖片上添加額外的文本注釋、視頻和鏈接等等。?
精美Demo
- ? ?Bentos demo
- ? ?Cars demo
- ? ?Fashion demo
- ? ?Furniture demo
零基礎(chǔ)使用的三個(gè)簡單步驟
幫助文檔? ? ?插件下載
?
Jquery Transit
實(shí)現(xiàn)超平滑的 CSS3 transformations（變換）和 transitions（過渡效果）的 jQuery 插件。?
支持的效果：
- ? ?translate(x, y)、rotateX(deg)、rotateY(deg)；
- ? ?rotate(deg)；
- ? ?rotate3d(x, y, z, deg)；
- ? ?scale(x, [y])；
- ? ?perspective(px)；
- ? ?skewX(deg)、skewY(deg)
- ?
你可以使用 jQuery 設(shè)置各種 CSS 變換效果，下面是簡單的示例代碼：
?| 1 2 3 4 5 6 7 8 9 10 11 | $("#box").css({ x: '30px' });?????????????? // Move right $("#box").css({ y: '60px' });?????????????? // Move down $("#box").css({ translate: [60,30] });????? // Move right and down $("#box").css({ rotate: '30deg' });???????? // Rotate clockwise $("#box").css({ scale: 2 });??????????????? // Scale up 2x (200%) $("#box").css({ scale: [2, 1.5] });???????? // Scale horiz and vertical $("#box").css({ skewX: '30deg' });????????? // Skew horizontally $("#box").css({ skewY: '30deg' });????????? // Skew vertical $("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation $("#box").css({ rotateY: 30 }); $("#box").css({ rotate3d: [1, 1, 0, 45] }); |
在線演示?? ??插件下載
?
SlabText
一款用于制作大號(hào)，加粗的響應(yīng)式（Responsive）頭條標(biāo)題的 jQuery 插件。
詳細(xì)使用方法參考插件主頁，下面是簡單示例代碼：
?| 1 2 3 4 5 6 7 | // Function to slabtext the H1 headings function slabTextHeadlines() { ????$("h1").slabText({ ????????// Don't slabtext the headers if the viewport is under 380px ????????"viewportBreakpoint":380 ????}); }; |
在線演示?? ??插件下載
轉(zhuǎn)載于:https://blog.51cto.com/tommike/1126098
總結(jié)
以上是生活随笔為你收集整理的期待已久的2012年度最佳 jQuery 插件揭晓的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android 程序启动界面Demo
- 下一篇： 目标跟踪之相关滤波