집 >
웹 프론트엔드 >
JS 튜토리얼 >
JQuery_jquery로 작성된 위아래로 스크롤을 클릭하는 작은 예
JQuery_jquery로 작성된 위아래로 스크롤을 클릭하는 작은 예
WBOY
풀어 주다: 2016-05-16 18:02:56
원래의
1034명이 탐색했습니다.
기능적 요구 사항: 1. 스크롤 상자에 10개의 레코드가 표시됩니다. 2. 버튼을 클릭할 때마다 자동 스크롤 없이 레코드 수가 위로 또는 아래로 스크롤됩니다. 🎜>3 , 레코드 수는 루프로 스크롤되지 않으며 시작점이나 끝점에 도달하면 스크롤이 중지됩니다. 다음은 간단한 구현 방법입니다. 1. 외부 컨테이너(div) 오버플로: 숨김, 내부 목록(ul) 2. 버튼 클릭 이벤트는 목록을 수정하는 함수를 트리거합니다 3. animate를 사용하여 애니메이션 효과 얻기 자세한 내용은 필요하지 않습니다. CSS 설정
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 본문 콘텐츠