웹 프론트엔드 JS 튜토리얼 페이지 blinds_jquery의 회전 표시 효과를 달성하는 jquery 메소드

페이지 blinds_jquery의 회전 표시 효과를 달성하는 jquery 메소드

May 16, 2016 pm 04:10 PM
jquery 효과 방법 보여주다 블라인드 페이지

이 기사의 예에서는 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));

2. 페이지는 다음과 같습니다
코드 복사 코드는 다음과 같습니다.

 

  •      李飞正在申请成为经验达人
     

  •  

  •      李飞已向职场专题《我是个亚太人呀亚太人》投稿
     

  •  

  •      董川民已成功购买职场专题《我是个亚太人呀亚太人
     

  •  

  •      李飞对《我是个亚太人呀亚太人》的解决方案又卖出一次
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •    
     

  •      李飞向职场专题《我是个亚太人呀亚太人》的投稿已通过审核,获得1元奖励。
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥评论经验:
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •   
     

  •      李飞已正式成为经验达人
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥评论经验:
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •     
     

  •      李飞已邀请董川民成为经验达人
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥评论经验:
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        


  • Sannerio Da Fei님의 질문에 답변했습니다



  • 핫 AI 도구

    Undresser.AI Undress

    Undresser.AI Undress

    사실적인 누드 사진을 만들기 위한 AI 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    Video Face Swap

    Video Face Swap

    완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

    뜨거운 도구

    메모장++7.3.1

    메모장++7.3.1

    사용하기 쉬운 무료 코드 편집기

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    스튜디오 13.0.1 보내기

    스튜디오 13.0.1 보내기

    강력한 PHP 통합 개발 환경

    드림위버 CS6

    드림위버 CS6

    시각적 웹 개발 도구

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

    사용자에게 드문 결함 발생: Samsung Watch 스마트워치에서 갑자기 흰색 화면 문제가 발생함 사용자에게 드문 결함 발생: Samsung Watch 스마트워치에서 갑자기 흰색 화면 문제가 발생함 Apr 03, 2024 am 08:13 AM

    스마트폰 화면에 녹색 줄이 나타나는 문제를 겪어보셨을 텐데요. 한 번도 본 적이 없더라도 인터넷에서 관련 사진을 본 적이 있을 것입니다. 그렇다면 스마트워치 화면이 하얗게 변하는 상황을 겪어보신 적 있으신가요? CNMO는 지난 4월 2일 외신을 통해 한 Reddit 사용자가 소셜 플랫폼에 삼성 워치 시리즈 스마트워치 화면이 하얗게 변하는 사진을 공유했다는 사실을 접했습니다. 해당 이용자는 "떠날 때 충전 중이었는데, 돌아올 때 이랬다. 재시작을 하려고 했는데, 삼성워치 스마트워치 화면이 하얗게 변했다"고 적었다. Reddit 사용자가 특정 모델을 지정하지 않았습니다. 하지만 사진으로 보면 삼성 워치5가 될 것 같습니다. 이전에 다른 Reddit 사용자도 보고했습니다.

    Tomato Free Novel 앱에서 소설 쓰는 방법 Tomato Novel에서 소설 쓰는 방법에 대한 튜토리얼을 공유하세요. Tomato Free Novel 앱에서 소설 쓰는 방법 Tomato Novel에서 소설 쓰는 방법에 대한 튜토리얼을 공유하세요. Mar 28, 2024 pm 12:50 PM

    Tomato Novel은 매우 인기 있는 소설 읽기 소프트웨어입니다. 우리는 종종 Tomato Novel에서 읽을 새로운 소설과 만화를 가지고 있습니다. 많은 친구들도 용돈을 벌고 소설의 내용을 편집하고 싶어합니다. 글로 쓰고 싶은데, 그 안에 소설을 어떻게 쓰는지 친구들도 모르니까, 소설 쓰는 방법에 대한 소개를 함께 살펴보는 시간을 가져보겠습니다. 토마토 소설을 사용하여 소설을 쓰는 방법에 대한 튜토리얼을 공유하세요. 1. 먼저 휴대폰에서 토마토 무료 소설 앱을 열고 개인 센터 - 작가 센터를 클릭하세요. 2. 토마토 작가 도우미 페이지로 이동하여 새로 만들기를 클릭하세요. 소설의 끝 부분에 예약하십시오.

    WeChat에서 삭제된 연락처를 복구하는 방법(삭제된 연락처를 복구하는 방법을 알려주는 간단한 튜토리얼) WeChat에서 삭제된 연락처를 복구하는 방법(삭제된 연락처를 복구하는 방법을 알려주는 간단한 튜토리얼) May 01, 2024 pm 12:01 PM

    불행하게도 사람들은 어떤 이유로든 실수로 특정 연락처를 삭제하는 경우가 많습니다. WeChat은 널리 사용되는 소셜 소프트웨어입니다. 사용자가 이 문제를 해결할 수 있도록 이 문서에서는 삭제된 연락처를 간단한 방법으로 검색하는 방법을 소개합니다. 1. WeChat 연락처 삭제 메커니즘을 이해하면 삭제된 연락처를 검색할 수 있습니다. WeChat의 연락처 삭제 메커니즘은 연락처를 주소록에서 제거하지만 완전히 삭제하지는 않습니다. 2. WeChat에 내장된 "연락처 복구" 기능을 사용하세요. WeChat은 "연락처 복구"를 제공하여 시간과 에너지를 절약합니다. 사용자는 이 기능을 통해 이전에 삭제한 연락처를 빠르게 검색할 수 있습니다. 3. WeChat 설정 페이지에 들어가서 오른쪽 하단을 클릭하고 WeChat 애플리케이션 "나"를 열고 오른쪽 상단에 있는 설정 아이콘을 클릭하여 설정 페이지로 들어갑니다.

    휴대폰에서 글꼴 크기를 설정하는 방법(휴대폰에서 글꼴 크기를 쉽게 조정) 휴대폰에서 글꼴 크기를 설정하는 방법(휴대폰에서 글꼴 크기를 쉽게 조정) May 07, 2024 pm 03:34 PM

    휴대폰이 사람들의 일상 생활에서 중요한 도구가 되면서 글꼴 크기 설정은 중요한 개인화 요구 사항이 되었습니다. 다양한 사용자의 요구를 충족하기 위해 이 기사에서는 간단한 조작을 통해 휴대폰 사용 경험을 개선하고 휴대폰의 글꼴 크기를 조정하는 방법을 소개합니다. 휴대폰의 글꼴 크기를 조정해야 하는 이유 - 글꼴 크기를 조정하면 텍스트가 더 명확하고 읽기 쉬워집니다. - 다양한 연령대의 사용자의 읽기 요구에 적합 - 시력이 좋지 않은 사용자가 글꼴 크기를 사용하는 것이 편리합니다. 휴대폰 시스템의 설정 기능 - 시스템 설정 인터페이스에 들어가는 방법 - 찾기에서 설정 인터페이스의 "디스플레이" 옵션을 입력합니다. - "글꼴 크기" 옵션을 찾아 타사를 통해 글꼴 크기를 조정합니다. 애플리케이션 - 글꼴 크기 조정을 지원하는 애플리케이션 다운로드 및 설치 - 애플리케이션을 열고 관련 설정 인터페이스로 진입 - 개인에 따라

    모바일 드래곤 알 부화의 비밀이 공개됩니다(모바일 드래곤 알을 성공적으로 부화하는 방법을 단계별로 알려드립니다) 모바일 드래곤 알 부화의 비밀이 공개됩니다(모바일 드래곤 알을 성공적으로 부화하는 방법을 단계별로 알려드립니다) May 04, 2024 pm 06:01 PM

    모바일 게임은 기술의 발전과 함께 사람들의 삶에 없어서는 안될 부분이 되었습니다. 귀여운 드래곤 알 이미지와 흥미로운 부화 과정으로 많은 플레이어들의 관심을 끌었으며, 특히 주목을 받은 게임 중 하나가 드래곤 알 모바일 버전이다. 플레이어가 게임에서 자신만의 드래곤을 더 잘 육성하고 성장시킬 수 있도록 이 글에서는 모바일 버전에서 드래곤 알을 부화시키는 방법을 소개합니다. 1. 적절한 유형의 드래곤 알을 선택하십시오. 플레이어는 게임에서 제공되는 다양한 유형의 드래곤 알 속성과 능력을 기반으로 자신이 좋아하고 적합한 드래곤 알 유형을 신중하게 선택해야 합니다. 2. 부화기의 레벨을 업그레이드하세요. 플레이어는 작업을 완료하고 소품을 수집하여 부화기의 레벨을 향상시켜야 합니다. 부화기의 레벨에 따라 부화 속도와 부화 성공률이 결정됩니다. 3. 플레이어가 게임에 참여하는데 필요한 자원을 수집하세요.

    Kyushu Fengshen Assassin 4S 라디에이터 리뷰 공냉식 'Assassin Master' 스타일 Kyushu Fengshen Assassin 4S 라디에이터 리뷰 공냉식 'Assassin Master' 스타일 Mar 28, 2024 am 11:11 AM

    ASSASSIN이라고 하면, 플레이어들은 확실히 "Assassin's Creed"에 나오는 암살의 대가들을 떠올릴 것이라고 생각합니다. 그들은 숙련될 뿐만 아니라 "어둠에 헌신하고 빛을 섬기는" 신념을 가지고 있습니다. 국내에서 잘 알려진 섀시/전원 공급 장치/냉각 가전 브랜드 DeepCool의 ASSASSIN 플래그십 공냉식 라디에이터 시리즈는 서로 일치합니다. 최근 이 시리즈의 최신 제품인 ASSASSIN4S가 출시되었습니다. "Assassin in Suit, Advanced"는 고급 플레이어에게 새로운 공냉식 경험을 선사합니다. 외관은 디테일이 가득합니다. Assassin 4S 라디에이터는 이중 타워 구조 + 단일 팬 내장 디자인을 채택했으며, 외부는 큐브 모양의 페어링으로 덮여 있어 전체적으로 강렬한 느낌을 줍니다. 다양한 컬러를 만나보세요.

    빨리 익히세요: Huawei 휴대폰에서 두 개의 WeChat 계정을 여는 방법 공개! 빨리 익히세요: Huawei 휴대폰에서 두 개의 WeChat 계정을 여는 방법 공개! Mar 23, 2024 am 10:42 AM

    현대 사회에서 휴대폰은 우리 삶에 없어서는 안 될 필수품이 되었습니다. 일상적인 의사소통, 업무, 생활을 위한 중요한 도구로 WeChat이 자주 사용됩니다. 그러나 서로 다른 거래를 처리할 때 두 개의 WeChat 계정을 분리해야 할 수도 있습니다. 이를 위해서는 휴대폰이 동시에 두 개의 WeChat 계정에 로그인하는 기능을 지원해야 합니다. 국내 유명 브랜드인 화웨이 휴대폰은 많은 사람들이 사용하고 있습니다. 그렇다면 화웨이 휴대폰에서 위챗 계정을 2개 개설하는 방법은 무엇일까요? 이 방법의 비밀을 공개해보겠습니다. 우선, Huawei 휴대폰에서 두 개의 WeChat 계정을 동시에 사용해야 합니다.

    Huntkey MX750P 전체 모듈 전원 공급 장치 검토: 750W의 집중된 백금 강도 Huntkey MX750P 전체 모듈 전원 공급 장치 검토: 750W의 집중된 백금 강도 Mar 28, 2024 pm 03:20 PM

    ITX 플랫폼은 컴팩트한 크기로 궁극적이고 독특한 아름다움을 추구하는 많은 플레이어를 끌어 모았습니다. 제조 공정의 개선과 기술 발전으로 Intel의 14세대 Core와 RTX40 시리즈 그래픽 카드 모두 ITX 플랫폼에서 강점을 발휘할 수 있으며, 게이머 또한 SFX 전원 공급 장치에 대한 요구 사항이 더 높습니다. 게임 매니아인 Huntkey는 고성능 요구 사항을 충족하는 ITX 플랫폼에서 새로운 MX 시리즈 전원 공급 장치를 출시했습니다. MX750P 풀 모듈 전원 공급 장치는 최대 750W의 정격 전력을 가지며 80PLUS 플래티넘 레벨 인증을 통과했습니다. 아래에서는 이 전원 공급 장치에 대한 평가를 가져옵니다. Huntkey MX750P 풀 모듈 전원 공급 장치는 심플하고 패셔너블한 디자인 컨셉을 채택하고 있으며 플레이어가 선택할 수 있는 두 가지 흑백 모델이 있습니다. 둘 다 무광택 표면 처리를 사용하고 은회색과 빨간색 글꼴로 질감이 좋습니다.

    See all articles