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. TOAST UI Chart

    JavaScript

    多彩なチャートを描画できる「TOAST UI Chart」

    TOAST UI Chartは多彩なチャートをWebページに描画できる…

  2. Jquery progress indicator on page scroll
  3. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

  4. PreViewTube.js
  5. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

  6. jQuery Slideshow

    JavaScript

    シンプル・軽量・レスポンシブなスライダー実装「jQuery Slideshow」

    jQuery Slideshowはシンプルで軽量、そしてレスポンシブに…

コメント

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

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

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP