《Web 開發最有用的50款 jQuery 插件集錦》系列文章向大家分享最具創新的50款 jQuery 插件，這些插件分成以下類別：網頁布局插件，導航插件，表格插件，滑塊和轉盤插件，圖表插件，圖片特效插件，視頻插件等等，將陸續分享給大家，記得關注和收藏啊。
您可能感興趣的相關文章
tiltShift.js
tiltShift.js 是一款很棒的 jQuery 插件，使用 CSS3 圖片濾鏡實現移軸鏡頭的效果。
使用非常簡單，使用 data 屬性配置參數，HTML 示例：
<img src="url" class="tiltshift" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y">
- -position（0-100），定義對焦點的位置。
- -blur（0 - ？），模糊半徑。設置為1或2比較合適。
- -focus（0-100），焦點的區域大小。
- -falloff （0-100），完全焦點和完全模糊之間的區域大小。
- -direction（“x”，“y”，或 0-360），方向。
JavaScript 調用示例：
$(function() {
$('.tiltshift').tiltShift();
});
jQuery Picture
jQuery Picture 是一款用於在網頁中添加響應式圖片的插件，在不同設備尺寸下顯示不同的圖片。
HTML 代碼示例：
<figure class="responsive" data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea">
<noscript>
<img src="assets/images/large.png" alt="A Half Brained Idea">
</noscript>
</figure>
JavaScript 示例：
$(function(){
$('figure.responsive').picture();
});
3D Image Slider
非常非常酷的 3D 圖片滑動效果，有五種絢麗的效果演示。使用示例如下：
HTML 代碼：
<ul id="sb-slider" class="sb-slider">
<li>
<a href="#" target="_blank">
<img src="images/1.jpg" alt="image1"/>
</a>
<div class="sb-description">
<h3>Creative Lifesaver</h3>
</div>
</li>
<li>
<img src="images/2.jpg" alt="image2"/>
<div class="sb-description">
<h3>...</h3>
</div>
</li>
<li><!-- ... --></li>
<!-- ... -->
</ul>
提供了眾多的配置選項，可以根據需要進行調整，下面是默認選項：
$.Slicebox.defaults = {
orientation : 'v',
perspective : 1200,
cuboidsCount : 5,
cuboidsRandom : false,
maxCuboidsCount : 5,
disperseFactor : 0,
colorHiddenSides : '#222',
sequentialFactor : 150,
speed : 600,
easing : 'ease',
autoplay : false,
interval: 3000,
fallbackFadeSpeed : 300,
onBeforeChange : function( position ) { return false; },
onAfterChange : function( position ) { return false; }
};
Image Transitions
讓人瞠目結舌的圖片切換效果，有 Flip、Multi-flip、Rotation、Cube、Unfold 等特效。
Responsive Img
Responsive Img 這款 jQuery 插件能夠根據容器的大小自動更換圖片的 src 屬性，從而實現響應式的圖片展示。
HTML 示例代碼：
<img id="img2" src="images/image.png" style="width:49%;" /> <img id="img3" src="images/image.png" style="max-width:49%;" />
JavaScript 示例代碼：
$("#img2,#img3").responsiveImg({
breakpoints:{
"_four":400,
"_two":200,
"_eight":800
}
});
Portfolio Image Navigator
精致的圖片導航效果，通過四個方向的箭頭控制，適合作品展示的應用場合。
默認參數配置的示例代碼如下：
$('#portfolio').portfolio({
image: {
width: 600,
height: 400,
margin: 20
},
path: {
width: 10,
height: 10,
marginTop: 5,
marginLeft: 5
},
animationSpeed: 400
});
您可能感興趣的相關文章