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