コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JQuery_jquery で記述された、クリックして上下にスクロールする小さな例

JQuery_jquery で記述された、クリックして上下にスクロールする小さな例

WBOY
リリース： 2016-05-16 18:02:56
オリジナル
1040 人が閲覧しました

機能要件:
1. スクロール ボックスに 10 件のレコードを表示します。
2. ボタンをクリックするたびに、レコードの数が自動的にスクロールされます。 🎜>3 の場合、レコード数はループでスクロールせず、開始点または終了点に到達するとスクロールが停止します。
以下は簡単な実装方法です:
1. 外部コンテナー (div) オーバーフロー: 非表示、内部リスト (ul)
2. ボタンのクリック イベントにより、リストを変更する関数がトリガーされます
3. animate を使用してアニメーション効果を実現します
詳細は不要です。コードに移動してください
CSS 設定

コードをコピーしますコードは次のとおりです:



JQuery コード




コードをコピー

コードは次のとおりです。 >
< script type="text/javascript"> (function ($) { $.fn.extend({ Scroll: function (opt, callback) { if (!opt) var opt = {}; var _btnUp = $("#" opt.up); //シャウフィー: 上ボタン var _btnDown = $("#" opt.down ); //シャウフィー: 下ボタン
var _this = this.eq(0).find("ul:first");
var lineH = _this.find("li:first").height() ; //行の高さを取得します
var line = opt.line ? parseInt(this.height() / lineH, 10);デフォルトは 1 画面、つまり親コンテナの高さです。
varspeed = opt.speed ? parseInt(opt.speed, 10) : 600; //スクロール速度は、値が大きいほど遅くなります。ミリ秒)
var m = line; //計算に使用される変数
var count = _this.find("li").length; //
var upHeight = line * lineH;
functionscrollUp() {
if (!_this.is(":animated")) { //要素がアニメーション化されているかどうかを判断します。アニメーション化されていない場合は、アニメーションを追加します。
if (m < count) { //m が合計数より小さいかどうかを判断します
m = line;
_this.animate({ marginTop: "-=" upHeight "px" }, Speed ) ;
}
}
}
関数scrollDown() {
if (!_this.is(":animated")) {
if (m > line) { / /m が画面数より大きいかどうかを判断します
m -= line;
_this.animate({ marginTop: " =" upHeight "px" },
}
}
}
_btnUp.bind("クリック", スクロールアップ);
_btnDown.bind("クリック", スクロールダウン); ;
$(function () {
$("#scrollDiv").Scroll({ 行: 10、速度: 500、上: "btn1"、下: "btn2" });
} );



$("#scrollDiv").Scroll({ 行: 10、速度: 500、上: "btn1"、下: " btn2" }) ;スクロールボタン、スクロール行数、スクロール速度を設定します。
HTML 本文の内容




コードをコピー


コードは次のとおりです:



情報スクロールバー デモ:

>


  • これはスクロール情報です
    • 2 行目
  • これはスクロール情報の 3 行目です
  • これはスクロール情報の 4 行目です
  • これはスクロール情報の 5 行目です

  • これはスクロール情報の 6 行目です
    • これはスクロール情報です7これはスクロール情報の 8 行目ですこれはスクロール情報の 9 行目です li>これはスクロール メッセージの 10 行目です
  • これはスクロール メッセージの 11 行目です

  • これはスクロール メッセージです< ;/li>
  • これはスクロール情報の 13 行目です
  • これはスクロール情報の 14 行目です
    • ;これはスクロール メッセージの 15 行目です
  • これはスクロール メッセージの 16 行目です
    • これはスクロール メッセージの 17 行目です< ;/li>
  • これはスクロール情報の 18 行目です
  • これはスクロール情報の 19 行目です
    • ;これはスクロール メッセージの 20 行目です
  • これはスクロール メッセージの 21 行目です
    • これはスクロール メッセージの 22 行目です
  • これはスクロール情報の 23 行目です
    • これはスクロール情報の 24 行目ですスクロール メッセージの 25 行目です

  • gt;これはスクロール メッセージの 26 行目です

  • これはスクロール情報の 28 行目です

  • これはスクロール情報の 29 行目です
    • これはスクロール メッセージの 30 行目
  • これはスクロール メッセージの 31 行目です

関連ラベル：
上下にスクロールする
ソース：php.cn
前の記事：範囲標準化取得_JavaScriptスキル 次の記事：Javascriptオブジェクト指向プログラミング(3) 非コンストラクタ関数の継承_jsオブジェクト指向
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
URL パラメータから取得した PHP 配列が期待どおりに動作しない カテゴリ ID を含む URL パラメータがあり、それを次のような配列として扱いたいと考えています: http://example.com?cat[]=3,9,13 PHP では、...
から 2024-04-06 22:09:02
0
1
1428
数独チェッカーが動作しないのですが？エラーの特定を手伝ってくれる人はいますか? オンラインエディターですべてを試しましたが、それでもエラーが発生します。しかし、私のマシンのVSCodeでこれを実行すると、正常に動作します。混乱していて、バグを見つけずにコードを...
から 2024-04-06 21:21:07
0
1
474
MySQL は複数のテーブルからデータを取得します 次の列を含む eg_design テーブル、および次の列を含む eg_domains テーブル、および次の列を含む eg_fonts テーブルがあります。 $domain_id に...
から 2024-04-06 18:42:44
0
2
479
Android 上の React-Native でステータス更新が機能しない スワイプ可能な水平ギャラリーに画像のペアを含むコードがいくつかあります。両方の画像の上部をクリックすると、画像がオフに切り替わるはずです。そのため、私が行ったのは、isImage2...
から 2024-04-06 16:54:10
0
1
410
React Three Fiber: スクロール イベントが遅れるのはなぜですか? ReactThreeFiber には、カメラのズーム全体にわたって保持したいスプライトを生成する React コンポーネントがあります。アルゴリズムは機能しているようですが (サイ...
から 2024-04-06 13:39:24
0
1
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート