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

機能要件:
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 行目です
  

下にスクロール

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。