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. jQuery Flip-Quote
  2. nuContextMenu

    JavaScript

    モダンなコンテキストメニューを実装できる「nuContextMenu」

    nuContextMenuはモダンで軽量なコンテキストメニューを実装で…

  3. Pilpil

    JavaScript

    プログレッシブ形式で画像表示時間を短縮してくれる「Pilpil」

    Pilpilは、ページの画像表示の時間を短縮するためのJSライブラリで…

  4. WEB TICKER

    JavaScript

    テキストや画像を無限にスクロールさせれるティッカー実装「WEB TICKER」

    WEB TICKERは、テキストや画像、リストなどさまざまなコンテンツ…

  5. Add To Cart Interaction
  6. JavaScript

    JavaScriptのlocation.searchでクエリ情報を取得してみる

    JavaScriptで、現在のページのクエリ情報(URLの末尾にある「…

コメント

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

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

最近の記事

  1. EOS R6
  2. EOS R5
  3. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ

アーカイブ

PAGE TOP