JQ文字向上轮播

效果前(如下图)：

效果后(如下图)：

html：

<ul id="J-lunbo-ul" >

               <li>

                       <div class="textBanner-center">

                           <p>顶替1</p>

                           <p>要要1</p>

                       </div>

                       <div class="textBanner-right">9天前</div>

                </li>

       </ul>

要做的效果是文字向上轮播，js代码如下:

$.fn.textSlider = function(settings){

    settings = jQuery.extend({

        speed : "normal",

        line : 2,

        timer : 3000

    }, settings);

    return this.each(function() {

        $.fn.textSlider.scllor( $( this ), settings );

    });

};

$.fn.textSlider.scllor = function($this, settings){

    var ul = $("ul:eq(0)",$this );

    var timerID;

    var li = ul.children();

    var liHight=$(li[0]).height();

    var upHeight=0-settings.line*liHight;//滚动的高度；

    var scrollUp=function(){

        ul.animate({marginTop:upHeight},settings.speed,function(){

            for(i=0;i<settings.line;i++){

                ul.find("li:first",$this).appendTo(ul);

            }

            ul.css({marginTop:0});

        });

    };

    var autoPlay=function(){

        timerID = window.setInterval(scrollUp,settings.timer);

    };

    var autoStop = function(){

        window.clearInterval(timerID);

    };

    //事件绑定

    ul.hover(autoStop,autoPlay).mouseout();

};

调用：

$(document).ready(function(){

    $("#FontScroll").textSlider({line:1,speed:500,timer:2000});

//line表示的是向上滚动几行
});