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

JQuery コード




コードをコピー

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 本文の内容




コードをコピー


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