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

이 기사의 예에서는 한 줄의 텍스트를 연속적으로 위쪽으로 스크롤하는 것을 구현하는 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는 程序设计有所帮助。

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.