2012年,众多的 jQuery 新插件发布出来,可以说是一个伟大的 jQuery 年份。这个系列的文章向大家分享最具创新的,同时也是最有用的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件,视频插件等等,将陆续分享给大家,记得关注和收藏啊。
Zoomooz.js
Zoomooz.js 是一款易于使用的插件,能使任何网页元素放大,支持 3D 转换。使用示例:
1
2
3
4
5
6
|
$(document).ready(
function
() {
$(
"#element"
).click(
function
(evt) {
$(
this
).zoomTo({targetsize:0.75, duration:600});
evt.stopPropagation();
});
});
|
equalize.js
equalize.js 是一款非常有用的 jQuery 插件,用于均分元素的宽度或者高度。使用示例:
1
2
3
4
5
6
|
$(
'.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 插件用于创建一个动态的多列布局。使用示例:
1
|
$(
'#myContent li'
).wookmark({offset: 2});
|
Freetile.js
Freetile 能够帮助你把组织内容在一个高效,动态和响应的布局中。使用示例:
1
|
$(
'#container'
).freetile({ animate:
true
, elementDelay: 30 });
|
gridster.js
Gridster 用于实现建立直观的可拖动的横跨多个列的元素布局。使用示例:
1
2
3
4
5
6
7
8
|
$(
function
(){
//DOM Ready
$(
".gridster ul"
).gridster({
widget_margins: [10, 10],
widget_base_dimensions: [140, 140]
});
});
|
Stellar.js
Stellar.js 是一款非常优秀的 jQuery 视差滚动特效插件。使用示例:
1
2
3
4
|
// For example:
$(window).stellar();
// or:
$(
'#main'
).stellar();
|
turn.js
turn.js 是轻量的 jQuery 杂志插件,基于 HTML5 技术实现。使用示例:
1
2
3
4
5
|
$(
"#flipbook"
).turn({
width: 400,
height: 300,
autoCenter:
true
});
|
jQuery HiddenPosition
jQuery HiddenPosition 可以让你放置任何元素,即使它们被隐藏。使用示例:
1
2
3
|
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 可以帮助你生成响应式设计中的字体的理想尺寸。使用示例:
1
2
3
4
5
6
7
|
$(
'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 是一款非常帮的自定义路径滚动插件。使用示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$.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
});
|
原文地址:http://www.cnblogs.com/lhb25/archive/2013/02/01/50-jquery-plugins-a.html