2012年，眾多的 jQuery 新插件發布出來，可以說是一個偉大的 jQuery 年份。這個系列的文章向大家分享最具創新的，同時也是最有用的50款 jQuery 插件，這些插件分成以下類別：網頁布局插件，導航插件，表格插件，滑塊和轉盤插件，圖表插件，圖片特效插件，視頻插件等等，將陸續分享給大家，記得關注和收藏啊。
您可能感興趣的相關文章
Zoomooz.js
Zoomooz.js 是一款易於使用的插件，能使任何網頁元素放大，支持 3D 轉換。使用示例：
$(document).ready(function() {
$("#element").click(function(evt) {
$(this).zoomTo({targetsize:0.75, duration:600});
evt.stopPropagation();
});
});
equalize.js
equalize.js 是一款非常有用的 jQuery 插件，用於均分元素的寬度或者高度。使用示例：
$('.parent').equalize('height'); // default, same as above
$('.parent').equalize('outerHeight');
$('.parent').equalize('innerHeight');
$('.parent').equalize('width');
$('.parent').equalize('outerWidth');
$('.parent').equalize('innerWidth');
Wookmark
Wookmark 這款 jQuery 插件用於創建一個動態的多列布局。使用示例：
$('#myContent li').wookmark({offset: 2});
Freetile.js
Freetile 能夠幫助你把組織內容在一個高效，動態和響應的布局中。使用示例：
$('#container').freetile({ animate: true, elementDelay: 30 });
gridster.js
Gridster 用於實現建立直觀的可拖動的橫跨多個列的元素布局。使用示例：
$(function(){ //DOM Ready
$(".gridster ul").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [140, 140]
});
});
Stellar.js
Stellar.js 是一款非常優秀的 jQuery 視差滾動特效插件。使用示例：
// For example:
$(window).stellar();
// or:
$('#main').stellar();
turn.js
turn.js 是輕量的 jQuery 雜志插件，基於 HTML5 技術實現。使用示例：
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
jQuery HiddenPosition
jQuery HiddenPosition 可以讓你放置任何元素，即使它們被隱藏。使用示例：
if($('#hiddenposition-a').is(':not(:visible)')) highlightOver($('#hiddenposition-a'));
if($('#hiddenposition-b').is(':not(:visible)')) highlightOver($('#hiddenposition-b'));
if($('#hiddenposition-of').is(':not(:visible)')) highlightOver($('#hiddenposition-of'));
Responsive Measure
Responsive Measure 可以幫助你生成響應式設計中的字體的理想尺寸。使用示例：
$('section').responsiveMeasure({
// Variables you can pass in:
idealLineLength: (defaults to 66),
minimumFontSize: (defaults to 16),
maximumFontSize: (defaults to 300),
ratio: (defaults to 4/3)
});
jQuery Scroll Path
壓軸的 jQuery Scroll Path 是一款非常幫的自定義路徑滾動插件。使用示例：
$.fn.scrollPath("getPath")
// Move to 'start' element
.moveTo(400, 50, {name: "start"})
// Line to 'description' element
.lineTo(400, 800, {name: "description"})
// Arc down and line to 'syntax'
.arc(200, 1200, 400, -Math.PI/2, Math.PI/2, true)
.lineTo(600, 1600, {
callback: function() {
highlight($(".settings"));
},
name: "syntax"
})
// Arc and rotate back to the beginning.
.arc(1300, 50, 900, -Math.PI/2, -Math.PI, true, {rotate: Math.PI*2, name: "end"});
// We're done with the path, let's initate the plugin on our wrapper element
$(".wrapper").scrollPath({drawPath: true, wrapAround: true});
您可能感興趣的相關文章
本文鏈接：2012年最有用50款 jQuery 插件:網頁布局篇