jQuery圖片或文字向左或向上連續(xù)滾動的效果。
源代碼:
jQuery.fn.extend({ /*滾動效果(向上或向左) 最后修改日期 2015-08-22 li //[可選] 子元素選擇器, 默認(rèn)值:'.li'; direction //[可選] 方向 'top' 向上, 'left' 向左, 默認(rèn)值 'left'; speed //[可選] 滾動速度(毫秒), 默認(rèn)值 500 interval //[可選] 停頓時間, 默認(rèn)值 2000 num //[可選] 單次滾動子元素個數(shù) 默認(rèn)值 1 easing //[可選] 動畫效果 默認(rèn)值 easeInOutQuint 說明 把 speed 和 interval 的值設(shè)置為一樣,然后把 easing 設(shè)置為 linear 即可實現(xiàn)持續(xù)移動效果 */ 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 毫秒的速度持續(xù)向左滾動 #demo11 里面的 a; $('#demo11').rolling({ li:'a' ,interval:2000 ,speed:2000 ,easing:'linear' }); //以默認(rèn)速度向左滾動 #demo1 里面的 li; $('#demo1').rolling(); //以默認(rèn)速度單次向左滾動 3個 #demo1 里面的 li; $('#demo1').rolling({ num:3 });