jQuery插件滚动实现无缝滚动效果
支持上下,淡入淡出,滚动时间设置,动画时间设置,鼠标是否停止设置。
可以修改默认配置参数。
$(内容)。easysroll({ / /默认配置参数方向:左 / /滚动方向(乡左)左右(项你)顶(到)底(下)默认左numberr:1 / 每个滚动默认号码是1延迟:1000 / /动画默认所需时间1000 1秒滚动:1000 / /每个动画时间间隔默认为1000等于二渐明:虚假,是否支持或淡出在 / / / enterstop褪色:真/假默认鼠标滚动是否暂停默认是true)}
HTML代码:
滚动插件(支持上下、淡入淡出、滚动时间设置、动画时间设置和停止设置鼠标)。
* { margin: 0px;padding: 0px;}
。内容{宽度:1010px;身高:102px;溢出:隐藏;边界:# 4e83c2 solid 1px;保证金:50px汽车;}
。内容UL {列表样式:无;缘:0px;padding: 0px;}
。内容的ul {宽度:100px;身高:100px;边界:# CCC solid 1px;溢出:隐藏;};}
支持上下,淡入淡出,滚动时间设置,动画时间设置,鼠标是否停止设置。
$(内容)。easysroll({
默认配置参数
方向:左/滚动方向(左)左(右项)顶部(到)底部(下)默认左
numberr:1 / /每卷默认号码是1
延迟:1000默认所需的动画时间等于1000秒。
滚动:1000。默认情况下,每个动画时间间隔为1000,等于1。
Fadein:假 / /是否支持或淡出默认假褪色
enterstop: / /真实;鼠标悬浮滚动默认为true
})
$(内容)。easysroll({
默认配置参数
方向:左/滚动方向(左)左(右项)顶部(到)底部(下)默认左
numberr:1 / /每卷默认号码是1
延迟:1000默认所需的动画时间等于1000秒。
滚动:1000。默认情况下,每个动画时间间隔为1000,等于1。
Fadein:假 / /是否支持或淡出默认假褪色
enterstop: / /真实;鼠标悬浮滚动默认为true
})
JS核心代码
(函数($){)
美元。FN。easysroll =功能(选项){
var参数{
方向:左
numberr:1
延迟:1000
滚动:1000
Fadein:假,
enterstop:真
};
扩展(参数,选项);
var $ = $(这个);
无功_this =这;
无功_time = null;
var obj = _this.find({类型= 'box});
可变项目= obj.find(礼);
无功itemsleg = items.length;
无功itemsw = items.outerwidth(真的);
无功itemsh = items.outerheight(真的);
无功_direction = ops.direction;
无功_numberr = ops.numberr;
无功_delays = ops.delays;
无功_scrolling = ops.scrolling;
无功_fadein = ops.fadein;
无功_enterstop = ops.enterstop;
如果(_direction = =顶_direction = =底| |)
{
Items.css({浮:无});
Obj.width(itemsw * itemsleg);
如果(_direction = =底){
Obj.css(边缘上
}
} else if(_direction = =左_direction = =权| |){
Items.css({浮:左});
Obj.width(itemsw * itemsleg);
如果(_direction = =右){
Obj.css(缘左
}
其他{ }
警报(配置的滚动方向错误,请重新配置);
返回true;
}
函数滚动(){
如果(_direction = =左){
obj.animate({余地:- _numberr * itemsw },数(_delays),函数(){)
对于(var i = 0;i < _numberr;i++){
Obj.find(礼)。情商(0)。AppendTo(obj);
}
Obj.css({余地:0 })
如果(_fadein){
Obj.find(礼)。情商(0)。动画({不透明度:0 },数(_delays));
Obj.find(礼),Eq(itemsleg-1)。Css({不透明度:1 });
}
});
} else if(_direction = =右){
obj.animate({余地:0 },数(_delays),函数(){)
对于(var i = 0;i < _numberr;i++){
Obj.find(礼),Eq(itemsleg-1)。PrependTo(obj);
};
Obj.css(缘左
如果(_fadein){
Obj.find(礼)。情商(0)。动画({不透明度:1 },数(_delays));
Obj.find(礼),Eq(itemsleg-1)。Css({不透明度:0 });
}
});
} else if(_direction = =顶){
obj.animate({边距:- _numberr * itemsh },数(_delays),函数(){)
对于(var i = 0;i < _numberr;i++){
Obj.find(礼)。情商(0)。AppendTo(obj);
}
Obj.css({边距:0 });
如果(_fadein){
Obj.find(礼)。情商(0)。动画({不透明度:0 },数(_delays));
Obj.find(礼),Eq(itemsleg-1)。Css({不透明度:1 });
}
});
} else if(_direction = =底){
obj.animate({边距:0 },数(_delays),函数(){)
对于(var i = 0;i < _numberr;i++){
Obj.find(礼),Eq(itemsleg-1)。PrependTo(obj);
}
Obj.css(边缘上
如果(_fadein){
Obj.find(礼)。情商(0)。动画({不透明度:1 },数(_delays));
Obj.find(礼),Eq(itemsleg-1)。Css({不透明度:0 });
}
});
}
}
this.hover美元(函数(){()
如果(_enterstop){
ClearInterval(_time);
}
}函数(){()
_time = setInterval(滚动,_scrolling);
})Trigger('mouseleave);
}
}(jQuery);
以上是本文的全部内容,希望大家能喜欢。