FrameScrub

JavaScript

iPhotoのようにマウスオーバーで画像が切り替わっていくjQueryプラグイン「FrameScrub」

FrameScrubというjQueryプラグインを使えば、マウスオーバーでカーソルを動かす度に画像が切り替わっていきます。iPhotoのサムネイル画像のような動きに近いですね。マウスイベントで画像を切り替えていく機能を実装したい時に覚えておきたいプラグインです。

[ads_center]

FrameScrubの使い方

FrameScrub

FrameScrub

実際のデモもあるので、気になる方はチェックしてみて下さい。マウスを置く位置によって違う画像が表示されるので、触っていておもしろいですね。

以下のようにFrameScrubを呼び出します。

$("#sample").frameScrub({
    defaultImage: 'firstImage',
    verticalAlignment: 'middle',
    showTitles: 'false',
});

HTMLは以下のような感じでマークアップしていきます。分かりやすくていいですね。最初に表示させたい画像にはidにfirstImageをつけてあげます。

<div id="sample" style="width:100%;height:300px;overflow:hidden;">
    <img src="images/img1.jpg" />
    <img src="images/img2.jpg" />
    <img src="images/img3.jpg" id="firstImage" />
    <img src="images/img4.jpg" />
    <!-- 中略 -->
</div>

というわけで、マウスを動かして画像を切り替わるようにしたい時に試してみてはいかがでしょうか。

関連記事

  1. HR Navigation Responsive Menu
  2. Pushbar.js

    JavaScript

    スライドでコンテンツを引き出せる「Pushbar.js」

    Pushbar.jsはスライドでコンテンツやナビゲーションメニューを引…

  3. jQuery Notebook
  4. HC Sticky

    JavaScript

    スクロールしても要素を固定できるJSライブラリ「HC Sticky」

    HC Stickyはスクロールした時に特定の要素を固定したまま表示でき…

  5. JavaScript

    とても簡単にカッコいいタグクラウドを実装することができるjQueryプラグイン「jQCloud」

    とってもカッコいいタグクラウドを実装することができるjQueryプラグ…

  6. Adi.js

    JavaScript

    アドブロックを検知してくれる「Adi.js」

    Adi.jsはアドブロックを検知してくれるjQueryプラグインです。…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP