한 줄의 text_javascript 기술의 지속적인 상향 스크롤을 구현하는 JS 방법-JS 튜토리얼-php.cn

한 줄의 text_javascript 기술의 지속적인 상향 스크롤을 구현하는 JS 방법

WBOY

풀어 주다： 2016-05-16 16:17:16

원래의

1244명이 탐색했습니다.

이 기사의 예에서는 한 줄의 텍스트를 연속적으로 위쪽으로 스크롤하는 것을 구현하는 JS 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

며칠 전 친구가 한 줄의 텍스트가 중단 없이 위로 스크롤되도록 JS 효과를 작성하는 데 도움을 준 적이 있습니다. 이제는 이를 필요로 하는 웹러들과 공유하고 있습니다. 먼저 HTML과 CSS 코드를 살펴보겠습니다.

CSS:

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

.wrap{padding:10px;border:1px #ccc 단색; 너비:500px;여백:20px 자동;}

.roll-wrap{높이:130px;overflow:hidden;}

HTML:

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

> > > > > > > > >

이 애니메이션 효과의 원리는 먼저 ul을 li 높이만큼 위로 스크롤한 다음 ul 끝의 ul에 첫 번째 li를 배치하는 것입니다. 이때 원래의 두 번째 li가 ul의 첫 번째 li가 됩니다. ul. 그런 다음 위의 작업을 반복하여 중단 없이 스크롤합니다.

JS(jQuery) 코드:

코드 복사

코드는 다음과 같습니다.

scrollTxt() 함수{

    var 컨트롤={}, 

        값={},

        t1=200, /*播放动画的时间*/

        t2=2000, /*播放时间间隔*/

        시;

    controls.rollWrap=$("#roll-wrap");

    controls.rollWrapUl=controls.rollWrap.children();

    controls.rollWrapLIs=controls.rollWrapUl.children();

    value.liNums=controls.rollWrapLIs.length;

    value.liHeight=controls.rollWrapLIs.eq(0).height();

    value.ulHeight=controls.rollWrap.height();

    this.init=function(){

        자동재생();

        PausePlay();

    }

    /*滚动*/

    함수 재생(){

        Controls.rollWrapUl.animate({"margin-top" : "-" value.liHeight}, t1, function(){

            $(this).css("margin-top" , "0").children().eq(0).appendTo($(this));

        });

    }

    /*자체滚动*/

    함수 autoPlay(){

        /*如果所有li标签의고도와大于.roll-wrap의고도则滚动*/

        if(values.liHeight*values.liNums >values.ulHeight){

            si=setInterval(함수(){

                플레이();

            },t2);

        }

    }

    /*鼠标经过ul时暂停滚动*/

    함수 PausePlay(){

        controls.rollWrapUl.on({

            "mouseenter":function(){

                ClearInterval(si);

            },

            "mouseleave":함수(){

                자동재생();

            }

        });

    }

}

new scrollTxt().init();

希望本文所述对大家의 javascript는 程序设计有所帮助。