jQuery图片或文字向左或向上连续滚动的效果。
源代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 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); }); }}); |
压缩过之后：
1 | 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)})}}); |
使用范例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | //间隔 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}); |
