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. jAnimate

    JavaScript

    フリップやバウンスなどのアニメーションを要素に実装できる「jAnimate」

    jAnimateはフリップやバウンスなどといったアニメーションを要素に…

  2. Excolo Slider

    JavaScript

    タッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」

    タッチやマウススライドにも対応しているシンプルなjQueryスライダー…

  3. pell

    JavaScript

    軽量でシンプルなWeb用のWYSIWYGエディタを実装できる「pell」

    pellは1.5KBと非常に軽量でシンプルなWeb用のWYSIWYGエ…

  4. Ion Zoom

    JavaScript

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Zoom」

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Z…

  5. jQuery Social Share Bar
  6. jQuery fullsizable

コメント

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

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

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP