> 웹 프론트엔드 > JS 튜토리얼 > JQuery_jquery로 작성된 위아래로 스크롤을 클릭하는 작은 예

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

WBOY
풀어 주다: 2016-05-16 18:02:56
원래의
1034명이 탐색했습니다.

기능적 요구 사항:
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 본문 콘텐츠




    코드 복사


  • 코드는 다음과 같습니다.



    정보 스크롤 막대:

    >

    • 스크롤 정보의 첫 번째 줄입니다

    • 2번째 줄

    • 스크롤 정보 3번째 줄입니다

    • 스크롤 정보 4번째 줄입니다
    • 스크롤 정보의 5번째 라인입니다

    • 스크롤 정보의 6번째 라인입니다

    • 스크롤 정보 라인입니다 7

    • 스크롤 정보 8번째 줄입니다
    • 스크롤 정보 9번째 줄입니다 li>스크롤링 메시지의 10번째 줄입니다
    • 스크롤링 메시지의 11번째 줄입니다

    • 스크롤링 메시지의 12번째 줄입니다< ;/li>
    • 스크롤 정보 13번째 줄입니다
    • 스크롤 정보 14번째 줄입니다 ;스크롤링 메시지의 15번째 줄입니다
    • 스크롤링 메시지의 16번째 줄입니다
    • 스크롤링 메시지의 17번째 줄입니다< ;/li>
    • 스크롤 정보 18번째 줄입니다
    • 스크롤 정보 19번째 줄입니다 ;스크롤링 메시지의 20번째 라인입니다스크롤링 메시지의 21번째 라인입니다스크롤링 메시지의 22번째 라인입니다
    • 스크롤 정보 23번째 줄입니다
    • 스크롤 정보 24번째 줄입니다 는 스크롤 메시지의 25번째 줄입니다이것은 스크롤 메시지의 26번째 줄입니다이것은 스크롤 메시지의 27번째 줄입니다
    • 스크롤 정보 28번째 줄입니다

    • 스크롤 정보 29번째 줄입니다
    • 스크롤링 메시지의 30번째 라인입니다.
    • 이것은 스크롤링 메시지의 31번째 라인입니다.
    • <의 스크롤링 메시지 라인 32입니다. 🎜>



    아래로 스크롤
    관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    최신 이슈
    인기 추천
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿