JavaScript

マウスオーバーで左右に画像をスクロールさせるプラグイン「jQuery Smooth Div Scroll」

jQuery Smooth Div ScrollというjQueryプラグインを使えば、マウスオーバーで左右に画像をスクロールさせることができます。イメージスライダーというかイメージギャラリーとしての活用も期待できますね。応用次第で色んな場所に使えそうです。以下は使い方です。

[ads_center]

jQuery Smooth Div Scrollの使い方

jQuery Smooth Div Scroll

jQuery Smooth Div Scroll

このように、マウスオーバーで画像を左右にスクロールしていくことができます。画像をじっくり見たい場合は、左右の矢印からカーソルを離すことでスクロールが止まります。

$(document).ready(function() {
    $("#sample").smoothDivScroll({
        mousewheelScrolling: "allDirections",
        manualContinuousScrolling: true,
        autoScrollingMode: "onStart"
    });
});

現時点で更新されている必要な外部ライブラリとしては以下があります。

  • jQuery (1.8.1)
  • jQuery UI custom (1.8.23)
  • jquery.mousewheel (3.0.6)

タッチにも対応したい場合は以下も必要です。

  • jquery.kinetic.js (1.5)

スマホやタブレットで閲覧するユーザーのためにもタッチは対応しておきたいですよね。

PLANEX BN-XPERIASBのレビュー充電・データ転送の切替スイッチ付!PLANEXの巻取り式ケーブル(BN-XPERIASB)購入レビュー前のページ

3Dスライダーを実装できるjQueryプラグイン「Impulse Slider」次のページImpulse Slider

関連記事

  1. ALighter

    JavaScript

    任意のテキストの場所に光を当ててくれるjQueryプラグイン「ALighter」

    ちょっとしたアクセントに使えそうですね。任意のテキストの場所に光を当て…

  2. no-image
  3. swingdrag

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

  4. CSS3 Menu Slider
  5. jQuery.mousetip

    JavaScript

    マウスの動きや位置に追従してくるツールチップを実装できる「jQuery.mousetip」

    jQuery.mousetipはマウスの動きや位置に追従してくる軽量の…

  6. JavaScript

    jQueryプラグイン・2014年上半期56選まとめ

    気づいたら2014年も上半期が終わってしまいましたね。そんなわけで、2…

コメント

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

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

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP