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>

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

明るさ自動調整を解除する方法Macのディスプレイ画面の明るさ自動調整を解除する方法前のページ

曲線上にテキストを配置できるjQueryプラグイン「CurvedText」次のページCurvedText

最近の記事

  1. 縦置きスタンド
  2. スマトラ
  3. さくらドーナツ
PAGE TOP