JS method to realize continuous upward scrolling of single line text_javascript skills

The example in this article describes the JS method of realizing continuous upward scrolling of a single line of text. Share it with everyone for your reference. The specific analysis is as follows:

A few days ago, I helped a friend write a JS effect for a single line of text to scroll upwards uninterruptedly. Now I am sharing it with the webers who need it. Let’s look at the HTML and CSS code first:

CSS:

Copy code The code is as follows:

.wrap{padding:10px;border:1px #ccc solid; width :500px;margin:20px auto;}
.roll-wrap{height:130px;overflow:hidden;}

HTML:

Copy code The code is as follows:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

The principle of this animation effect is to first scroll the ul upward by the height of the li, and then place the first li in the ul at the end of the ul. At this time, the original second li becomes the first li in the ul. , and then repeat the above action to achieve uninterrupted scrolling.


JS (jQuery) code:

Copy code

The code is as follows:

function scrollTxt(){
    var controls={},
        values={},
        t1=200, /*播放动画的时间*/
        t2=2000, /*播放时间间隔*/
        si;
    controls.rollWrap=$("#roll-wrap");
    controls.rollWrapUl=controls.rollWrap.children();
    controls.rollWrapLIs=controls.rollWrapUl.children();
    values.liNums=controls.rollWrapLIs.length;
    values.liHeight=controls.rollWrapLIs.eq(0).height();
    values.ulHeight=controls.rollWrap.height();
    this.init=function(){
        autoPlay();
        pausePlay();
    }
    /*滚动*/
    function play(){
        controls.rollWrapUl.animate({"margin-top" : "-" values.liHeight}, t1, function(){
            $(this).css("margin-top" , "0").children().eq(0).appendTo($(this));
        });
    }
    /*自动滚动*/
    function autoPlay(){
        /*如果所有li标签的高度和大于.roll-wrap的高度则滚动*/
        if(values.liHeight*values.liNums > values.ulHeight){
            si=setInterval(function(){
                play();
            },t2);
        }
    }
    /*鼠标经过ul时暂停滚动*/
    function pausePlay(){
        controls.rollWrapUl.on({
            "mouseenter":function(){
                clearInterval(si);
            },
            "mouseleave":function(){
                autoPlay();
            }
        });
    }
}
new scrollTxt().init();

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