有時，你可能有一個項目要求獨特的布局或用戶界面的要求，單獨使用 CSS 無法實現的，像這類項目就需要 JavaScript 來實現，因此，這篇文章中收集了一組優秀的 jQuery 插件，可以幫助你完成一些奇妙的布局和界面效果。
您可能感興趣的相關文章
equalize.js
用於均衡元素的的高度或寬度的 jQuery 插件。這對於統一頁面元素規格的布局非常有用。
均衡 id 為 width-example 的元素的寬度的使用實例：
$('#width-example').equalize('width');
均衡 class 為 parent 的元素的子段落的使用實例：
$('.parent').equalize({children: 'p'});
jQuery Scroll Path
這款插件用於實現自定義路徑的滾動效果。使用 Canvas 繪制路徑線條和弧形，動畫效果形象。
使用實例：
$(".your-container-element").scrollPath({
drawPath: true,
wrapAround: true,
scrollBar: false
});
freetile.js
Freetile 這款 jQuery 插件，用於高效的組織網頁內容為動態、響應式的布局。
使用示例：
$('#container').freetile({ animate: true, elementDelay: 30 });
gridster.js
這款插件用於實現神話般的可拖放的多列網格布局，允許建立直觀的跨越多個列的拖動布局元素。
示例 HTML 代碼：
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
<li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
<li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
<li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
<li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
</ul>
</div>
示例 JavaScrpt 代碼：
$(function(){
$(".gridster ul").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [140, 140]
});
});
rcarousel
rcarousel 是基於 jQuery UI 的連續傳送帶效果插件，支持高度定制和 IE6 等古老的瀏覽器。
使用示例：
<div id="carousel">
<img src="flowers/tulip.jpg" alt="a tulip"/>
<img src="flowers/rose.jpg" alt="a rose"/>
<img src="flowers/daisy.jpg" alt="a daisy"/>
<img src="flowers/sunflower.jpg" alt="a sunflower"/>
<img src="flowers/pansy.jpg" alt="a pansy"/>
</div>
<script type="text/javascript">
jQuery(function($) {
$( "#carousel" ).rcarousel( {width: 200, height: 200} );
});
</script>
jQuery HiddenPosition
jQuery HiddenPosition 能夠定位任何的頁面元素，即使它們被隱藏。
turn.js
Turn.js 是一個 JavaScript 庫，使您的網頁內容看起來像一本真正的書或雜志。使用示例：
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
BookBlock
這款 jQuery 插件用於創建類似小冊子風格的效果，讓您通過項目導航翻轉頁面。
您可能感興趣的相關文章