jQuery圖片或文字向左或向上連續滾動的效果。

源代碼：

jQuery.fn.extend({
	/*滾動效果(向上或向左) 最后修改日期 2015-08-22
	li			//[可選] 子元素選擇器,					默認值：'.li';
	direction	//[可選] 方向 'top' 向上， 'left' 向左,	默認值 'left';
	speed		//[可選] 滾動速度(毫秒),					默認值 500
	interval	//[可選] 停頓時間，						默認值 2000
	num			//[可選] 單次滾動子元素個數				默認值 1
	easing		//[可選] 動畫效果							默認值 easeInOutQuint
	說明 把 speed 和 interval 的值設置為一樣，然后把 easing 設置為 linear 即可實現持續移動效果
	*/
	rolling: function(p){
		var l = p.li ? p.li : 'li';
		var d = p.direction ? p.direction : 'left';
		var s = p.speed ? p.speed : 500;
		var t = p.interval ?  p.interval : 2000;
		var n = p.num ? p.num : 1;
		var e = p.easing ? p.easing : 'easeInOutQuint';
		var $t = $(this);
		function st(){
			for(i=0;i<=n-1;i++){
				$t.append($t.find(l).eq(i).prop("outerHTML"));
			}
			if(d == 'top'){
				var h = $t.find(l).outerHeight();	
			} else if(d == 'left'){
				var h = $t.find(l).outerWidth();	
			}
			h = h*n;
			var a = {},c = {};
			a[d] = -h;
			c[d] = 0;
			$t.animate(a,s,e,function(){
				for(i=n-1;i>=0;i--){
					$t.find(l).eq(i).remove();
				}
				$t.css(c);
			});
		}
		$t.css('position','relative');
		var g = setInterval(st,t);
		$t.hover(function(){
			clearInterval(g);
		},function(){
			g = setInterval(st,t);
		});
	}
});

壓縮過之后：

jQuery.fn.extend({rolling:function(p){var l=p.li?p.li:'li';var d=p.direction?p.direction:'left';var s=p.speed?p.speed:500;var t=p.interval?p.interval:2000;var n=p.num?p.num:1;var e=p.easing?p.easing:'easeInOutQuint';var $t=$(this);function st(){for(i=0;i<=n-1;i++){$t.append($t.find(l).eq(i).prop("outerHTML"))}if(d=='top'){var h=$t.find(l).outerHeight()}else if(d=='left'){var h=$t.find(l).outerWidth()}h=h*n;var a={},c={};a[d]=-h;c[d]=0;$t.animate(a,s,e,function(){for(i=n-1;i>=0;i--){$t.find(l).eq(i).remove()}$t.css(c)})}$t.css('position','relative');var g=setInterval(st,t);$t.hover(function(){clearInterval(g)},function(){g=setInterval(st,t)})}});

使用范例：

//間隔 3000 毫秒向上滾動 .gg_con ul 里面的 li;
$('.gg_con ul').rolling({
    direction:'top'
    ,interval:3000 
});
 
//以 2000 毫秒的速度持續向左滾動 #demo11 里面的 a;
$('#demo11').rolling({
    li:'a'
    ,interval:2000
    ,speed:2000
    ,easing:'linear'
});
 
//以默認速度向左滾動 #demo1 里面的 li;
$('#demo1').rolling();
 
//以默認速度單次向左滾動 3個 #demo1 里面的 li;
$('#demo1').rolling({
    num:3
});