使用了jquery和jquery.timers。
jQuery.fn.scroller = function(){ return $(this).each(function(i){ if (this.scrollee){return;} var height = 30, times = 3000, step=1, i=0; var animateTime = 50, emptyTime = 1000; var erasePX = function(str){ return parseInt(str.replace(/[px]/g, "")); }; var animate = function(){ var t = erasePX(div.css('top')); if (t > 30){ $(ts).stopTime('animate'); loop(); }else{ t += step; div.css('top', t); } }; var scroll = function(){ if (ts.scrollee.rows != 0){ $(ts).stopTime('scroller'); $(ts).everyTime(animateTime, 'animate', animate); }else{ $(ts).everyTime(emptyTime, 'scroller', loop); } }; var loop = function(){ var rows = ts.scrollee.rows; if (rows == 0) return; div.html(ts.scrollee.sc[i++]); div.css('top', -height); if (i == rows){ i = 0; } scroll(); }; var ts = this; var div = $('<div style="position: relative; top: 0px;"></div>'); $(this).html(div); this.scrollee = {rows: 0, sc: []}; $('.scroller-row', ts).live('mouseover', function() { $(ts).stopTime('animate'); }).live('mouseout', function(){ $(ts).everyTime(animateTime, 'animate', animate); }); scroll(); }); }; jQuery.fn.scrollerAddRow = function(content){ return $(this).each(function(i){ if (!this.scrollee){return;} var ts = this; ts.scrollee.row ++; var div = $('<div class="scroller-row"></div>'); div.html(content); ts.scrollee.sc.push(div); ts.scrollee.rows ++; }); };
.scroller-row{
height: 30px;
}
$("#scrollerContainer").scroller(); $("#scrollerContainer").scrollerAddRow('aaaaa'); $("#scrollerContainer").scrollerAddRow('bbbbb');