《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
});

　　外掛下載     效果演示

您可能感興趣的相關文章