JavaScript

画像にマウスオーバーするとズームして綺麗にエフェクトがかかるjQueryプラグイン「Swish」

画像にマウスオーバーをするとズームして綺麗なオーバーレイのエフェクトがかかるjQueryプラグイン「Swish」をご紹介します。イメージギャラリーのサイトなどに活用したいですね。虫メガネのアイコンも表示されるので、クリックして拡大サイズの画像を見ることができるというニュアンスも伝わりやすいかと思います。以下、使い方です。

[ads_center]

使い方

jQueryとプラグインファイルを読み込み、Swishをセットします。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="hover.zoom.js"></script>
<script>
$(function() {
    // 画像01
    $('#blue').hoverZoom();

    // 画像02
    $('#green').hoverZoom({
        overlay: true,
        overlayColor: '#90bd2e',
        overlayOpacity: 0.7,
        zoom: 50,
        speed: 800
    });

    // 画像03
    $('#pink').hoverZoom({
        overlayColor: '#bd2e75',
        zoom: 0
    });
});
</script>

続いて、HTMLです。

<!-- 画像01 -->
<div>
    <a href="#" class="zoom" id="blue"><img src="images/img01.jpg" alt="画像01" /></a>
</div>

<!-- 画像02 -->
<div>
    <a href="#" class="zoom" id="green"><img src="images/img02.jpg" alt="画像02" /></a>
</div>

<!-- 画像03 -->
<div>
    <a href="#" class="zoom" id="pink"><img src="images/img03.jpg" alt="画像03" /></a>
</div>

CSSも記述しておきます。widthとheightは画像のサイズを指定しておきます。

.zoom {
    width:300px;
    height:185px;
    display:block;
    position:relative;
    overflow:hidden;
    border:1px solid #ddd;
    background:#fff url(images/loader.gif) no-repeat center;
}
.zoom img {
    display:none
}
.zoomOverlay {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    display:none;
    background-image:url(images/zoom.png);
    background-repeat:no-repeat;
    background-position:center;
}

オプションでは、オーバーレイの色や透明度、他にもどのくらい拡大するかや拡大時のスピードなどを指定することができます。以下はデフォルト値のオプションです。

$('デフォルト').hoverZoom({
    overlay: true, // オーバーレイをするかどうか
    overlayColor: '#2e9dbd', // オーバーレイの色
    overlayOpacity: 0.7, // オーバーレイの透明度
    zoom: 25, // どのくらいズームするか
    speed: 300 // ズーム時のスピード
});

シンプルでわかりやすいですね。こんな感じで、とても簡単にお洒落なホバーエフェクトをかけることができます。ということで、Swishの使い方についてでした。

以下からダウンロードできます。

関連記事

  1. A simple jQuery Accordion with unlimited nesting

    JavaScript

    シンプルなアコーディオンを実装する「A simple jQuery Accordion with u…

    シンプルで見やすいアコーディオンを実装することができる「A simpl…

  2. no-image

    JavaScript

    レスポンシブ対応のシンプルなLightboxプラグイン

    レスポンシブに対応したシンプルなLightboxプラグインを紹介します…

  3. jqTree

    JavaScript

    JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」

    jqTreeはJSONデータを元にHTMLでツリー構造を作成できるjQ…

  4. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  5. jQuery Social Share Bar
  6. ShowMore.js

    JavaScript

    長いコンテンツを折りたためるjQueryプラグイン「ShowMore.js」

    ShowMore.jsは長いコンテンツを折りたたんで表示・非表示を簡単…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP