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)

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

関連記事

  1. ClassyCountdown

    JavaScript

    スタイリッシュな円形カウントダウンのjQueryプラグイン「ClassyCountdown」

    ClassyCountdownはシンプルでスタイリッシュな円形カウント…

  2. Square Menu
  3. no-image

    JavaScript

    依存関係のないタグ付け機能を実装できる「taggle.js」

    taggle.jsは依存関係のないタグ付け機能を実装できるのが特徴です…

  4. DD Scroll Boxes
  5. Validatr

    JavaScript

    HTML5のinput属性による検証ができるフォーム実装「Validatr」

    Validatrは、HTML5のinput属性を用いて検証できるさまざ…

  6. JavaScript

    指定した要素をパカパカと点滅させることができる「jquery.flicker」

    とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要…

コメント

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

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

最近の記事

  1. SOL001
  2. 末廣ラーメン
  3. ナッティホワイトチョコレートフラペチーノ

アーカイブ

PAGE TOP