JS實現單行文字不間斷向上滾動的方法

2019-11-20 13:17:20

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JS實現單行文字不間斷向上滾動的方法。分享給大家供大家參考。具體分析如下：

前幾天幫一個朋友寫了一個單行文字不間斷向上滾動的JS效果，現在分享給需要的weber。先看HTML和CSS代碼：

CSS：

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

HTML：

復制代碼代碼如下:

<div class="wrap">
    <div class="roll-wrap" id="roll-wrap">
        <ul>
            <li>JS文本向上滾動1</li>
            <li>JS文本向上滾動2</li>
            <li>JS文本向上滾動3</li>
            <li>JS文本向上滾動4</li>
            <li>JS文本向上滾動5</li>
            <li>JS文本向上滾動6</li>
            <li>JS文本向上滾動7</li>
        </ul>
    </div>
</div>

該動畫效果的原理是先將ul向上滾動一個li的高度，滾動完后將ul里面的第一個li放到ul的末尾，這時原第二個li變成了ul里面的第一個li，然后再重復上面的動作，就這樣不斷重復實現不間斷滾動。

JS（jQuery）代碼：

復制代碼代碼如下:

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();