jqueryを使用してコンテンツの自動上下スクロールを実現

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