JQuery_jquery로 작성된 위아래로 스크롤을 클릭하는 작은 예-JS 튜토리얼-php.cn

JQuery_jquery로 작성된 위아래로 스크롤을 클릭하는 작은 예

WBOY

풀어 주다： 2016-05-16 18:02:56

원래의

1047명이 탐색했습니다.

기능적 요구 사항:
1. 스크롤 상자에 10개의 레코드가 표시됩니다.
2. 버튼을 클릭할 때마다 자동 스크롤 없이 레코드 수가 위로 또는 아래로 스크롤됩니다. 🎜>3 , 레코드 수는 루프로 스크롤되지 않으며 시작점이나 끝점에 도달하면 스크롤이 중지됩니다.
다음은 간단한 구현 방법입니다.
1. 외부 컨테이너(div) 오버플로: 숨김, 내부 목록(ul)
2. 버튼 클릭 이벤트는 목록을 수정하는 함수를 트리거합니다
3. animate를 사용하여 애니메이션 효과 얻기
자세한 내용은 필요하지 않습니다.
CSS 설정

코드 복사로 이동하세요. 코드는 다음과 같습니다:

JQuery 코드

코드 복사

코드는 다음과 같습니다. < script type="text/javascript"> (함수 ($) { $.fn.extend({ 스크롤: 함수(선택, 콜백)

if (!opt) var opt = {};

var _btnUp = $("#" opt.up) //Shawphy: 위로 버튼 
var _btnDown = $("#" opt.down ); //Shawphy: 아래쪽 버튼 
var _this = this.eq(0).find("ul:first") 
var lineH = _this.find("li:first").height() ; //라인 높이 가져오기
var line = opt.line ?parseInt(opt.line, 10) :parseInt(this.height() / lineH, 10); 기본값은 하나의 화면, 즉 상위 컨테이너의 높이입니다. 
var speed = opt.speed ?parseInt(opt.speed, 10) : 600; //스크롤 속도, 값이 클수록 속도가 느려집니다( milliseconds) 
var m = line; //계산에 사용되는 변수 
var count = _this.find("li").length; // 요소의 총 개수 line * lineH; 
function scrollUp() { 
 if (!_this.is(":animated")) { //요소가 애니메이션되고 있는지 확인합니다. 
if (m < count) { //m이 총 개수보다 작은지 확인 
m = line 
_this.animate({ marginTop: "-=" upHeight "px" }, speed; ) ; 
} 
} 
} 
function scrollDown() { 
if (!_this.is(":animated")) { 
if (m > line) { / /m이 화면 수보다 큰지 확인 
m -= line 
_this.animate({ marginTop: " =" upHeight "px" }, speed) 
} 
} 
 } 
_btnUp.bind("click", scrollUp) 
_btnDown.bind("click", scrollDown) 
} 
})(jQuery) ; 
$(function () { 
$("#scrollDiv").Scroll({ line: 10, speed: 500,up: "btn1", down: "btn2" }); 
} ); 
 

 
$("#scrollDiv").Scroll({ line: 10, speed: 500,up: "btn1", down: " btn2" }) ;스크롤 버튼, 스크롤 라인 수 및 스크롤 속도를 설정합니다. 
Html 본문 콘텐츠 




코드 복사