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. InlineTweet.js

    JavaScript

    Webページのテキストにツイートリンクを作成できる「InlineTweet.js」

    InlineTweet.jsはWebページのテキストにツイートリンクを…

  2. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

  3. diamonds.js
  4. A simple jQuery Accordion with unlimited nesting

    JavaScript

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

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

  5. GoogleSheets-HTMLImporter
  6. Stackbox.js

    JavaScript

    プルプル震えるモーダルボックスを実装できるjQueryプラグイン「Stackbox.js」

    Stackbox.jsというjQueryプラグインを使えば、プルプル震…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP