JS實作單行文字不間斷向上捲動的方法_javascript技巧

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

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

CSS：

複製程式碼 程式碼如下:

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

HTML：

複製程式碼 程式碼如下:

   

       

           
• JS文字向上捲動1

           
• JS文字上滾動2

           
• JS文字上滾動3

           
• JS文字向上捲動4

           
• JS文字向上捲動5

           
• JS文字向上捲動6

           
• JS文字向上捲動7

       

   

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

JS（jQuery）代碼：

複製程式碼 程式碼如下:

函數scrollTxt(){
    var control={},
        值={},
        t1=200, /* 播放動畫的時間*/
        t2=2000, /*播放時間間隔*/
        si;
    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(){
        自動播放();
        暫停播放();
    }
    /* 滾動*/
    函數播放(){
        controls.rollWrapUl.animate({"margin-top" : "-"values.liHeight}, t1, function(){
            $(this).css("margin-top" , "0").children().eq(0).appendTo($(this));
        });
    }
    /*自動滾動*/
    函數自動播放(){
        /*若所有li標籤的高度且大於.roll-wrap的高度則滾動*/
        if(values.liHeight*values.liNums >values.ulHeight){
            si=setInterval(function(){
                播放（）；
            },t2);
        }
    }
    /*滑鼠經過ul時間暫停滾動*/
    函數暫停播放（）{
        controls.rollWrapUl.on({
            "mouseenter":function(){
                清除間隔(si);
            },
            "mouseleave":function(){
                自動播放();
            }
        });
    }
}
newscrollTxt().init();

希望本文對大家介紹的javascript程式設計有幫助。