페이지 blinds_jquery의 회전 표시 효과를 달성하는 jquery 메소드-JS 튜토리얼-php.cn

이 기사의 예에서는 jquery를 사용하여 페이지 블라인드의 스크롤 표시 효과를 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

1. 여기 코드는 아래와 같이 jquery1.3 이상의 지원이 필요합니다.

코드 복사 코드는 다음과 같습니다.

jQuery.fn.extend((

함수($){

      var l = 4,//스크롤 줄 수

            t=5000,//한 번 스크롤한 후 다음 번 스크롤을 시작하는 데 시간이 얼마나 걸립니까

              rt=500,//n 스크롤마다 경과 시간

n="li",//스크롤할 HTML 태그 
 기본 스크롤 개체에 포함되어 있음
o="ul",//스크롤하는 경우 스크롤 요소를 감싸는 HTML 태그 
가 활성화됩니다.
              e,//호출 개체

EN, //객체에서 굴려야 할 모든 객체를 호출합니다 

             h;//행 높이 스크롤

        var vLimit=80;//시각적 한계인 0.1초보다 약간 작습니다

        var maxRnum=Math.ceil(rt/vLimit);//최대 스크롤 수

          var maxRh=0; // 각 스크롤 높이 

            var fnRollFirst=function(arg){//arg를 1n씩 롤업하고 완료 후 첫 번째 n을 마지막 위치로 이동합니다. 

               var rCount=0 //스크롤 횟수 기록

                var rVal=setInterval(function(){//vLimit마다 반복, 총 maxRnum-1회 

r카운트 ;

                          arg.scrollTop(arg.scrollTop() maxRh);

If(rCount>=(maxRnum-1)){//1 볼륨 감소

;
> ) h-maxRh*(maxRnum-1));//마지막으로 수정된 스크롤 값

//첫 번째 요소를 끝으로 이동

>
nowN.eq(nowN.length-1).after(nowN.eq(0));

//첫 번째 위치는 비운 후 되감기하여 수정해야 합니다

> >
|
                        },vLimit);

        };

        var fnRollArr=function(arg){//배열의 객체에 대해 하나씩 스크롤 시작

          var out=setInterval(function(){

                        fnRollFirst(arg.shift());

If(!arg.length){

;
                };

             },rt);                                         
        };
        var fnRoll=function(){//하나씩 스크롤해야 하는 개체 컬렉션 가져오기

            var arr=new Array();

              e.children(o).each(function(){

              var rn=$(this).children(n);

If(rn.길이>1){

                   arr.push($(this));

                };

            });

              setInterval(function(){

                            fnRollArr(arr.slice(0));

             },t);

        };

        var fnLay=function(){//레이아웃 페이지

              h=en.height();

            var nu=Math.ceil(en.length/l);

          var u=$("<" o ">");

u.css({"overflow":"hidden","height":h "px","margin-bottom":"15px"});

for(var i=0;i
                    en.slice(nu*i,nu*(i 1)).wrapAll(u);

~
        };

        var fnMain=function(){//스크롤 기본 메소드

If(maxRnum>1){

                       fnLay();

                     maxRh=Math.ceil(h/maxRnum);

                      fnRoll();

            };

        };

        var fnStart= function(arg){//디스플레이 모드 초기화

             e=arg;

              en = e.children(n);

               en.show();

If(en.length>l){

                        fnMain();

               }그밖에{

                      false를 반환합니다.

            };

        };

         반품 {

​​​​​​ setLine: function(num){//스크롤을 위해 몇 줄로 나눌 것인지 설정

(!isNaN(num) && num>0)?l=num:"";

                   이것을 돌려주세요;

            },

​​​​​​ setTime: 함수(num){//스크롤 간격: 밀리초

(!isNaN(num) && num>0)?t=num:"";

                   이것을 돌려주세요;

            },

              startRoll: function(){//스크롤 시작

                                    fnStart(this);

            }
        };

}

)(jQuery));