ホームページ >ウェブフロントエンド >jsチュートリアル >jquery ツール シリーズ スクロール可能 learning_jquery
jquery ツール シリーズ スクロール可能 learning_jquery
- WBOYオリジナル
- 2016-05-16 18:47:071646ブラウズ
复制代 代码如下:
1. タイトルの例
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor。 Praesent dui arcu、egestas quis、adipiscing a。
60 秒
2. タイトルの例
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor。 Praesent dui arcu、egestas quis、adipiscing a。
80秒
3. タイトルの例
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor。 Praesent dui arcu、egestas quis、adipiscing a。
100 秒
4. タイトルの例
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor。 Praesent dui arcu、egestas quis、adipiscing a。
120 秒
5. タイトルの例
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor。 Praesent dui arcu、egestas quis、adipiscing a。
140 秒
この機能は、jqueryObject.scrollable() メソッドによって実現され、その中のスクロール可能なメソッドは次の 2 つの方法を提供します:
1. $("div.scrollable").scrollable//この方法は採用默认方法显示滚動栏
2. $("div.scrollable").scrollable({config object}) // このメソッドは、構成オブジェクトによって、コンテンツの表示および方式を制御します。
以下のコードは、第 2 の方式の構成パラメータです（必要なのは、これは jquery の準備ができたメソッド内ですぐに実行できます）：
复制代代码如下:
$("div.scrollable").scrollable({
size: 3,
vertical:false,
//clickable:false,
loop:true,//设置是否自动跳转（根据间隔时间）
//interval: 1000,//设置间歇时间间隔
//speed:2000,
items: '#thumbs',
//prev:'.prev',//跳转到上一项
//next:'.next'//跳转到下一项
prevPage:'.prev',//跳转到上一页
nextPage:'.next',//跳转到下一页
hoverClass: 'hover',
easing:'linear'
});
下面对scrollable配置参数描述如下：
|
属性
|
デフォルト値 | |
| サイズ | 5 | 表示するスクロール項目（画像やボタンなど）の数を設定しますが、前提条件としてスクロール項目の親ノード（jquery tools公式の親ノードのクラス）が正しく設定されている必要がありますWeb サイトとこの記事の例はスクロール可能です) CSS ファイル内の幅 (幅)。それ以外の場合は、ここで設定するだけでは基本的に効果がありません。また、ページングが設定されている場合は、ページごとのスクロール項目の数がここに表示されます。つまり、「nextPage」または「prePage」量をトリガーした後にスクロール項目が移動しました。 |
| 縦型 | 偽 | スクロール項目がスクロールする方向を設定します。false の場合、スクロール項目は水平方向にスクロールします。それ以外の場合は、垂直方向にスクロールします。この属性を変更する必要がある場合は、垂直スクロールだけでなく、対応する css ファイルも変更する必要があります。 |
| クリック可能 | 本当 | スクロール項目をクリックしたときに、スクロール操作がトリガーされるかどうか (つまり、スクロール項目がスクロールするかどうか)。 |
| ループ | 偽 | 最後のスクロール項目までスクロールする際に、最初のスクロール項目から再度スクロールを開始するかどうかを指定する項目です。interval(間隔は0ではありません)属性と併用する必要があります。 |
| 間隔 | 0 | はスクロール項目を自動で切り替える間隔(ミリ秒)を設定します。このプロパティを正の値に設定すると、間隔時間に達した後、スクロール項目が次のスクロール項目に自動的に切り替わります。 |
| 速度 | 400 | 自動スクロール速度 (ミリ秒) |
| キーボード | 本当 | このプロパティを true/false に設定して、/ をアクティブにしてキーボードの矢印キーをブロックします。スクロール項目の操作。このプロパティが true に設定されている場合は、左 / 右矢印キーを使用して水平スクロールのスクロール項目を切り替えます。上 / 矢印キーを押すと、垂直スクロール項目が切り替わります。 |
| アイテム | ".items" | スクロール項目を含む HTML 要素 - jquery セレクターを通じて取得。HTML 要素 (またはこれら) はスクロール項目 |
| 前 | ".prev" | スクロール項目を前方に移動する HTML 要素 (つまり、進むボタン) が含まれます。jquery セレクターを通じて取得されます。html 要素は、スクロール項目の親ノードの兄弟ノードである必要があります。ただし、セレクターが ID によって html 要素を取得する場合、その html 要素はページ上のどこにでも配置できます。 |
| 次 | ".next" | スクロール項目を後方に移動する HTML 要素 (つまり、「戻る」ボタン) が含まれます。これは、jquery セレクターを通じて取得されます。html 要素は、スクロール項目の親ノードの兄弟ノードである必要があります。ただし、セレクターが ID によって html 要素を取得する場合、その html 要素はページ上のどこにでも配置できます。 |
| 前のページ | ".prevPage" | には、前のページにジャンプする HTML 要素が含まれます。これは、jquery セレクターを通じて取得されます。HTML 要素は、スクロール項目の親ノードの兄弟ノードである必要があります。ただし、セレクターが ID によって html 要素を取得する場合、その html 要素はページ上のどこにでも配置できます。 |
| 次のページ | ".nextPage" | には、jquery セレクターを通じて取得された、次のページにジャンプする HTML 要素が含まれます。この HTML 要素は、スクロール項目の親ノードの兄弟ノードである必要があります。ただし、セレクターが ID によって html 要素を取得する場合、その html 要素はページ上のどこにでも配置できます。 |
| ナビ | 「.navi」 | HTML ページネーションナビゲーターを含む 要素 - jquery 経由の セレクターの取得; html 要素は、スクロール項目の親ノードの兄弟ノードである必要があります。ただし、そのセレクターが id 経由で html 要素を取得する場合、html要素はページ上のどこにでも配置できます。 |
| naviItem | 「あ」 | ページ分割されたナビゲーターに含まれるHTML 要素 (ページ分割されたナビゲーション項目) - jqueryセレクター取得経由; これらの要素はページ分割されたナビゲーションに使用されます。 |
| アクティブクラス | 「アクティブ」 | 次の 2 つのケースにおける、対応する項目の CSS クラス名: a.クリックされたスクロール項目 b.現在のページに対応するページング ナビゲーション項目 |
| 無効クラス | 「無効」 | は、next/nextPage(次の項目/次のページ) と prev/prevPage (前の項目/前のページ) が使用不可として表示されます CSS クラス名。例: 現在のスクロール項目の前にスクロール項目がない場合、prev 要素は使用不可 (無効) 状態。 |
| マウスがスクロール項目の上に移動すると、スクロール項目の CSS クラス名は クラス 。 | ||
| 緩和 | 「スイング」 | は、スクロール項目を切り替える際のアニメーション効果を設定するために使用されます。現在、jquery ツールには「スイング」と「リニア」の 2 つのアニメーション効果が用意されています。その他のアニメーション効果については、jquery イージング プラグイン |
| API | 偽 | この属性は、タブシリーズの juqry ツール と同じです。 🎜> および jquery ツール の ツールチップ |
| onBeforeSeek | この属性で設定された関数は、スクロール項目がスクロールされる前にトリガーされます。このプロパティ設定関数が false を返す場合、この関数をトリガーしたスクロール項目はスクロールせず、前のスクロール項目の位置を置き換えます。この関数は、ターゲット要素のインデックス番号を含む配列を返します。 | |
| onSeek | The function set by this attribute is triggered after the scroll item is scrolled. |
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。