态度云

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