/**
* @classdescription 模拟marquee,无间断滚动内容
* @author aken li(www.kxbd.com)
* @date 2009-07-17
* @dom
*
* @css
* #marquee {width:200px;height:50px;overflow:hidden;}
* @usage
* $('#marquee').j$_mrq(options);
* @options
* isequal:true,//所有滚动的元素长宽是否相等,true,false
* loop: 0,//循环滚动次数,0时无限
* direction: 'left',//滚动方向,'left','right','up','down'
* scrollamount:1,//步长
* scrolldelay:20//时长
* controlbtn:{left:'#gol',right:'#gor'},//控制加速滚动的按钮id,有四个属性left,right,up,down分别对应四个方向
* newamount:4,//加速滚动的步长
* eventa:'mouseenter',//鼠标事件,加速
* eventb:'mouseleave'//鼠标事件,原速
*/
(function($){
$.fn.j$_mrq = function(options){
var opts = $.extend({},$.fn.j$_mrq.defaults, options);
return this.each(function(){
var $marquee = $(this);//滚动元素容器
var _scrollobj = $marquee.get(0);//滚动元素容器dom
var scrollw = $marquee.width();//滚动元素容器的宽度
var scrollh = $marquee.height();//滚动元素容器的高度
var $element = $marquee.children(); //滚动元素
var $kids = $element.children();//滚动子元素
var scrollsize=0;//滚动元素尺寸
var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滚动类型,1左右,0上下
//防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
$element.css(_type?'width':'height',10000);
//获取滚动元素的尺寸
if (opts.isequal) {
scrollsize = $kids[_type?'outerwidth':'outerheight']() * $kids.length;
}else{
$kids.each(function(){
scrollsize += $(this)[_type?'outerwidth':'outerheight']();
});
}
//滚动元素总尺寸小于容器尺寸,不滚动
if (scrollsize<(_type?scrollw:scrollh)) return;
//克隆滚动子元素将其插入到滚动元素后,并设定滚动元素宽度
$element.append($kids.clone()).css(_type?'width':'height',scrollsize*2);
var nummoved = 0;
function scrollfunc(){
var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollleft':'scrolltop';
if (opts.loop > 0) {
nummoved+=opts.scrollamount;
if(nummoved>scrollsize*opts.loop){
_scrollobj[_dir] = 0;
return clearinterval(moveid);
}
}
if(opts.direction == 'left' || opts.direction == 'up'){
var newpos = _scrollobj[_dir] + opts.scrollamount;
if(newpos>=scrollsize){
newpos -= scrollsize;
}
_scrollobj[_dir] = newpos;
}else{
var newpos = _scrollobj[_dir] - opts.scrollamount;
if(newpos<=0){
newpos += scrollsize;
}
_scrollobj[_dir] = newpos;
}
};
//滚动开始
var moveid = setinterval(scrollfunc, opts.scrolldelay);
//鼠标划过停止滚动
$marquee.hover(
function(){
clearinterval(moveid);
},
function(){
clearinterval(moveid);
moveid = setinterval(scrollfunc, opts.scrolldelay);
}
);
//控制加速运动
if(opts.controlbtn){
$.each(opts.controlbtn, function(i,val){
$(val).bind(opts.eventa,function(){
opts.direction = i;
opts.oldamount = opts.scrollamount;
opts.scrollamount = opts.newamount;
}).bind(opts.eventb,function(){
opts.scrollamount = opts.oldamount;
});
});
}
});
};
$.fn.j$_mrq.defaults = {
isequal:true,//所有滚动的元素长宽是否相等,true,false
loop: 0,//循环滚动次数,0时无限
direction: 'left',//滚动方向,'left','right','up','down'
scrollamount:1,//步长
scrolldelay:20,//时长
newamount:3,//加速滚动的步长
eventa:'mousedown',//鼠标事件,加速
eventb:'mouseup'//鼠标事件,原速
};
$.fn.j$_mrq.setdefaults = function(settings) {
$.extend( $.fn.j$_mrq.defaults, settings );
};
})(jquery);