*

jQuery 水平スクロール&cssでカスタム可能なスクロールバーなプラグイン

公開日: : jQuery, 開発

水平スクロール&cssでカスタム可能なスクロールバーなプラグイン

jQueryを使ったプラグインはその辺りにゴロゴロ落ちているので、
基本的に自作する事は無いのですが、たまに「アレ」と「コレ」を同時に使ったら
動かなくなったなんて事はよくある話で。。。

調べると、どちらもプラグインもノードの書き換えを行なっていて
ノードがめちゃくちゃな事にヽ(・ω・)/ズコー

動作環境、jQueryバージョン

jquery-1.9.1
jquery.mousewheel 3.1.12
現行のFirefox、Chrome、IEでは動作確認してますが、
それ以外は反響があったら対応予定?です。

概要

・水平スクロール
・スクロールバーのカスタマイズ
の組み合わせです。

指定の領域にマウスが居る場合、スクロールを行うと水平に移動します。
横いっぱいにスクロールがされたら、下に下ります。
逆の場合は上にスクロールします。

後はスクロールバーのカスタマイズが可能な事と
ナビゲーションリンクが使用可能って事です。

説明より実際に触れたほうが良いのでこちらからどうぞ(;・∀・)

DEMO

・rc_horizontalScroll-2.0.1.zip
・39196byte
DOWNLOAD

レイアウト

クラス「cont-box」がひとつのボックスとなります。
ナビゲーション用のリンク設置はお好みで。

	

SECTION 01

1つ目のコンテンツ

SECTION 02

2つ目のコンテンツ

SECTION 03

3つ目のコンテンツ

SECTION 04

4つ目のコンテンツ

SECTION 05

5つ目のコンテンツ

...略

スクロールバー

スクロールバーは色(color)、高さ(height)、丸み(radius)位の変更なら
耐えれると思います。

・hsTrack
スクロールバーの背景

・hsFace
スクロールバーの四角いやつ


.hsTrack {
    background: none repeat scroll 0 0 #eee;
    width: 100%;
}
.hsFace {
    background: none repeat scroll 0 0 #ccc;
    height: 8px;
    position:relative;
    cursor: pointer;
}

jQUery説明

・animation
スライドの時間を調整出来ます。
defult:500

・navGroup
指定されたクラスの直下の要素に対してパネルのリンクを生成します。
サンプル通りのHTMLで組めばおそらく問題は有りませんが、変更した
場合は動作対象外です。
リンクを設置しない場合は消して下さい。

・scroll
スクロールを追加するかどうか。
falseを指定すると出なくなります。
defule:true

	$(function(){
		$('.cont-out').horizontalScroll({
			animation:300,
			navGroup:'.nav',
			scroll:true
		});
	});

イベント処理にbindを使用したり、DOMアクセスの効率悪いとか
突っ込みどころ満載ですがご愛嬌ということで。。。(;´∀`)

関連記事

droid

Google Cloud Messaging プロジェクトナンバー API Key取得編 2014/07最新版

Google Cloud Messaging プロジェクトナンバー APK取得編 コンソールの仕様

記事を読む

PHP-icon

PHPでIE11ユーザーエージェント判定

IE11のユーザーエージェント判定 自作のユーザーエージェント判定クラスでIEの判定が出来てなかっ

記事を読む

droid

Androidで課金アプリ作製 エラー編(-1008:Unknown error)

Androidで課金アプリ作製 エラー編 In-app Billing v3を使用したアプリ開発で

記事を読む

jquery-logo_png

jQuery draggable,resizable 要素のサイズがずれる

uiプロパティ以外で要素のサイズ取得を試みる draggableとresizableを使用し要素の

記事を読む

php-logo

PHPで指定日の祝日を取得する方法 GoogleAPI利用

google APIを利用して指定日が祝日かどうか取得する 技術的な内容を書く場合は載せてるコード

記事を読む

jquery-logo_png

jQuery Googleカレンダー風スケジュール表 タイムテーブル

jQueryでスケジュール表もしくはタイムテーブルっぽいもの 仕事でスケジュール管理のシステム開発

記事を読む

server_error_500

Apache 500 Internal Server Error

久しぶりに自宅のローカルサーバーを動かしたら「Server error!」が出てゑっ!? 解決方法

記事を読む

Mac ネットワークユーティリティ

Macで ローカルサーバー構築 ローカルネットワーク参加編

Macで ローカルサーバー環境を構築するまで Apache設定編 ネットでの情報は必要最低限しか載

記事を読む

jquery-logo_png

jQuery Google画像検索風プラグイン

Google画像検索風プラグイン rc_gallery_open こういったプラグインは数多の開

記事を読む

PHP-icon

PHP substr エスケープ処理で文字化け

PHP substr 文字化け mb_substrで文字コードを合わせて切り取ればOKって記事は沢

記事を読む

jquery-logo_png
jQuery 水平スクロール&cssでカスタム可能なスクロールバーなプラグイン

水平スクロール&cssでカスタム可能なスクロールバーなプラグイン j

c
C言語 バッファオーバーランまで 関数の引数ポインタ

関数引数としてのポインタ 今回は関数引数としてのポインタに関して。

c2
C言語 バッファオーバーランまで ポインタ考察編

趣旨 ただC言語を勉強してもモチベーションがあがり辛いので、 取り

droid
Google Cloud Messaging プロジェクトナンバー API Key取得編 2014/07最新版

Google Cloud Messaging プロジェクトナンバー A

jquery-logo_png
jQuery removeClass 特定のクラスを全て削除

特定のクラスを全て削除 フォームを作成した時に、入力項目に不備があっ

→もっと見る

PAGE TOP ↑