
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
});
闽公网安备号:35010402350377
