讓人期待已久的度最佳 jQuery 插件終於發佈了。jQuery 自2006年發佈以來,經過6年的迅速發展,目前已是最流行和使用最廣泛的 JavaScript 框架,這主要歸功於衆多圍繞 jQuery 的技術社區。jQuery 社區的開發者持續不斷的在發佈各種 jQuery 插件,Web 開發人員能夠非常輕鬆把一些驚豔的功能到項目中。推薦閱讀:《2011年度最佳 jQuery 插件》。
Arctext.js
Arctext.js 是基於 Lettering.js 的文字旋轉插件,根據設置的旋轉半徑準確計算每個字母的旋轉弧度並均勻分佈。
雖然 CSS3 也能夠實現字符旋轉效果,但是要讓安排每個字母都沿着彎曲路徑排布相當的複雜,Arctext.js 則可以輕鬆實現。
可以通過設置下面四個參數調整效果:
1
2
3
4
|
radius /*
旋轉的半徑,最小值是字符長度的一半,如果設置爲-1,則文本是直的,不會旋轉。默認值是0 */ dir /*
旋轉方向,1是向下,-1是向上。默認值是1 */ rotate /*
設置爲true表示每個字符都旋轉。默認值是true */ fitText /*
如果想使用fitText插件(http://fittextjs.com/),則需要設置爲true。默認值是false
*/ |
stellar.js
正如它的口號所說:Parallax has never been easier,的確,它能幫助輕鬆的實現網頁視差滾動效果。
給標籤添加data屬性(data-stellar-ratio等,使用方法參考幫助文檔),然後運行$.stellar()就可以看到很酷的時差滾動效果了。
1
2
3
4
|
//
For example: $(window).stellar(); //
or: $( '#main' ).stellar(); |
還可以通過設置偏移量來調整時差效果:
1
2
3
4
|
$.stellar({ horizontalOffset:
40, verticalOffset:
150 }); |
也可以爲元素添加data屬性來配置每個元素的偏移,例如:
<div data-stellar-ratio="2"
data-stellar-horizontal-offset="40"
data-stellar-vertical-offset="150">
Get turn.js
這款 jQuery 插件能夠給頁面添加漂亮的過渡(transition)效果,類似於書本或者雜誌。
主要特色
- ✓ 支持運行於 iPad 和 iPhone;
- ✓ 簡單,美觀和強大的 API 接口;
- ✓ 可以通過 Ajax 動態加載頁面;
- ✓ 純 HTML5/CSS3 呈現頁面內容;
- ✓ 提供兩種漂亮的過渡(transition)效果;
- ✓ 藉助 turn.html4.js,可以在 IE8 等低版本瀏覽器工作。
使用非常簡單,示例代碼:
<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 是一款輕量的響應式 jQuery 內容滾動插件,能夠幫助你在項目輕鬆的創建漂亮的內容滾動效果。
這款插件也是 2011 年度最佳 jQuery 插件,今年被 WooThemes 收購併發佈了2.0版本,因此繼續入選 2012 年度榜單。
主要特色
- ✓ 簡單的,語義化的標籤;
- ✓ 支持所有主流的瀏覽器;
- ✓ 水平/垂直滑動和淡入淡出動畫;
- ✓ 支持多個滑塊,回調 API,以及更多;
- ✓ 觸摸滑動支持硬件加速;
- ✓ 能夠自定義導航選項。
- ✓ 兼容最新版本的 jQuery。
使用非常簡單,示例代碼:
<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 是一個基於 jQuery,在網頁中實現多點觸摸 JavaScript 庫。
支持 Tap、Double Tap、Drag、Hold、Swipe 和 Transform 六種觸摸手勢。
主要特色
- ✓ 在網站中快速實現 Touch 事件;
- ✓ 輕量,GZIP 壓縮後只有2KB;
- ✓ 功能專注,專用於多點觸摸手勢;
- ✓ 完全獨立的庫,也提供了 jQuery 插件版本;
詳細使用幫助可參考插件的Github主頁,下面是簡單示例:
$("#element")
.hammer({
// options...
})
.bind("tap", function(ev) {
console.log(ev);
});
iPicture
iPicture 是一款用於製作交互式照片效果的 jQuery 插件,可以在圖片上添加額外的文本註釋、視頻和鏈接等等。
精美Demo
零基礎使用的三個簡單步驟
- 下載 iPicture² 並解壓到開發目錄;
- 打開 Wizard 頁面,上傳圖片並根據需要設置工具提示,然後拷貝生成的代碼;
- 把代碼粘貼到你的網站頁面中並映入 ipicture.js 和 iPicture.css 兩個文件,搞定!
Jquery Transit
實現超平滑的 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 設置各種 CSS 變換效果,下面是簡單的示例代碼:
$("#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
一款用於製作大號,加粗的響應式(Responsive)頭條標題的 jQuery 插件。
詳細使用方法參考插件主頁,下面是簡單示例代碼:
// Function to slabtext the H1 headings
function slabTextHeadlines() {
$("h1").slabText({
// Don't slabtext the headers if the viewport is under 380px
"viewportBreakpoint":380
});
};
溫馨提示:如果您看了這篇博文,覺得有所收穫,請點擊右下角的【推薦】,給以支持和鼓勵:)
出處:jizhula.com 記住啦:)
http://www.cssjs.cn/?post=135 參考屬性!《找了好久才找準滴 不容易呀!》