/**
* @classDescription 超级Marquee，å¯åšå›¾ç‰‡å¯¼èˆªï¼Œå›¾ç‰‡è½®æ¢
* @author Aken Li(www.kxbd.com)
* @date 2009-07-27
* @dependence jQuery 1.3.2
* @DOM
*
* @CSS
* #marquee {width:200px;height:50px;overflow:hidden;}
* @Usage
* $('#marquee').kxbdSuperMarquee(options);
* @options
* distance:200,//一次滚动的è·ç¦»
* duration:20,//缓动效果，å•æ¬¡ç§»åŠ¨æ—¶é—´ï¼Œè¶Šå°é€Ÿåº¦è¶Šå¿«ï¼Œä¸º0æ—¶æ— ç¼“åŠ¨æ•ˆæžœ
* time:5,//åœé¡¿æ—¶é—´ï¼Œå•ä½ä¸ºç§’
* direction: 'left',//滚动方å‘，'left','right','up','down'
* scrollAmount:1,//æ¥é•¿
* scrollDelay:20//时长，å•ä½ä¸ºæ¯«ç§’
* isEqual:true,//æ‰€æœ‰æ»šåŠ¨çš„å…ƒç´ é•¿å®½æ˜¯å¦ç›¸ç‰,true,false
* loop: 0,//循环滚动次数，0æ—¶æ— é™
* btnGo:{left:'#goL',right:'#goR'},//控制方å‘的按钮ID，有四个属性left,right,up,down分别对应四个方å‘
* eventGo:'click',//é¼ æ ‡äº‹ä»¶
* controlBtn:{left:'#goL',right:'#goR'},//æŽ§åˆ¶åŠ é€Ÿæ»šåŠ¨çš„æŒ‰é’®ID，有四个属性left,right,up,down分别对应四个方å‘
* newAmount:4,//åŠ é€Ÿæ»šåŠ¨çš„æ¥é•¿
* eventA:'mouseenter',//é¼ æ ‡äº‹ä»¶ï¼ŒåŠ é€Ÿ
* eventB:'mouseleave',//é¼ æ ‡äº‹ä»¶ï¼ŒåŽŸé€Ÿ
* navId:'#marqueeNav', //导航容器ID，导航DOM:- 1
- 2
,导航CSS:.navOn
* eventNav:'click' //导航事件
*/
(function($){
$.fn.kxbdSuperMarquee = function(options){
var opts = $.extend({},$.fn.kxbdSuperMarquee.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上下
var scrollId, rollId, isMove, marqueeId;
var t,b,c,d,e; //滚动动画的å‚æ•°,t:当å‰æ—¶é—´ï¼Œb:开始的ä½ç½®ï¼Œc:改å˜çš„ä½ç½®ï¼Œd:æŒç»çš„时间，e:结æŸçš„ä½ç½®
var _size, _len; //åå…ƒç´ çš„å°ºå¯¸ä¸Žä¸ªæ•°
var $nav,$navBtns;
var arrPos = [];
var numView = 0; //当å‰æ‰€çœ‹åå…ƒç´
var numRoll=0; //è½®æ¢çš„次数
var numMoved = 0;//å·²ç»ç§»åŠ¨çš„è·ç¦»
//防æ¢æ»šåŠ¨åå…ƒç´ æ¯”æ»šåŠ¨å…ƒç´ å®½è€Œå–ä¸åˆ°å®žé™…滚动åå…ƒç´ å®½åº¦
$element.css(_type?'width':'height',10000);
//获å–æ»šåŠ¨å…ƒç´ çš„å°ºå¯¸
var navHtml = '';
if (opts.isEqual) {
_size = $kids[_type?'outerWidth':'outerHeight']();
_len = $kids.length;
scrollSize = _size * _len;
for(var i=0;i<_len;i++){
arrPos.push(i*_size);
navHtml += '- '+ (i+1) +'
';
}
}else{
$kids.each(function(i){
arrPos.push(scrollSize);
scrollSize += $(this)[_type?'outerWidth':'outerHeight']();
navHtml += '- '+ (i+1) +'
';
});
}
navHtml += '
';
//æ»šåŠ¨å…ƒç´ æ€»å°ºå¯¸å°äºŽå®¹å™¨å°ºå¯¸ï¼Œä¸æ»šåŠ¨
if (scrollSize<(_type?scrollW:scrollH)) return;
//克隆滚动åå…ƒç´ å°†å…¶æ’å…¥åˆ°æ»šåŠ¨å…ƒç´ åŽï¼Œå¹¶è®¾å®šæ»šåŠ¨å…ƒç´ 宽度
$element.append($kids.clone()).css(_type?'width':'height',scrollSize*2);
//è½®æ¢å¯¼èˆª
if (opts.navId) {
$nav = $(opts.navId).append(navHtml).hover( stop, start );
$navBtns = $('li', $nav);
$navBtns.each(function(i){
$(this).bind(opts.eventNav,function(){
if(isMove) return;
if(numView==i) return;
rollFunc(arrPos[i]);
$navBtns.eq(numView).removeClass('navOn');
numView = i;
$(this).addClass('navOn');
});
});
$navBtns.eq(numView).addClass('navOn');
}
//设定åˆå§‹ä½ç½®
if (opts.direction == 'right' || opts.direction == 'down') {
_scrollObj[_type?'scrollLeft':'scrollTop'] = scrollSize;
}else{
_scrollObj[_type?'scrollLeft':'scrollTop'] = 0;
}
if(opts.isMarquee){
//滚动开始
//marqueeId = setInterval(scrollFunc, opts.scrollDelay);
marqueeId = setTimeout(scrollFunc, opts.scrollDelay);
//é¼ æ ‡åˆ’è¿‡åœæ¢æ»šåŠ¨
$marquee.hover(
function(){
clearInterval(marqueeId);
},
function(){
//marqueeId = setInterval(scrollFunc, opts.scrollDelay);
clearInterval(marqueeId);
marqueeId = setTimeout(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;
});
});
}
}else{
if(opts.isAuto){
//è½®æ¢å¼€å§‹
start();
//é¼ æ ‡åˆ’è¿‡åœæ¢è½®æ¢
$marquee.hover( stop, start );
}
//控制å‰åŽèµ°
if(opts.btnGo){
$.each(opts.btnGo, function(i,val){
$(val).bind(opts.eventGo,function(){
if(isMove == true) return;
opts.direction = i;
rollFunc();
if (opts.isAuto) {
stop();
start();
}
});
});
}
}
function scrollFunc(){
var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';
if(opts.isMarquee){
if (opts.loop > 0) {
numMoved+=opts.scrollAmount;
if(numMoved>scrollSize*opts.loop){
_scrollObj[_dir] = 0;
return clearInterval(marqueeId);
}
}
var newPos = _scrollObj[_dir]+(opts.direction == 'left' || opts.direction == 'up'?1:-1)*opts.scrollAmount;
}else{
if(opts.duration){
if(t++=scrollSize){
newPos-=scrollSize;
}
}else{
if(newPos<=0){
newPos+=scrollSize;
}
}
_scrollObj[_dir] = newPos;
if(opts.isMarquee){
marqueeId = setTimeout(scrollFunc, opts.scrollDelay);
}else if(t=_len){
numView = 0;
}else if(numView<0){
numView = _len-1;
}
$navBtns.eq(numView).addClass('navOn');
numRoll = numView;
}
var _temp = numRoll<0?scrollSize:0;
t=0;
b=_scrollObj[_dir];
//c=(pPos != undefined)?pPos:_neg*opts.distance;
e=(pPos != undefined)?pPos:_temp+(opts.distance*numRoll)%scrollSize;
if(_neg==1){
if(e>b){
c = e-b;
}else{
c = e+scrollSize -b;
}
}else{
if(e>b){
c =e-scrollSize-b;
}else{
c = e-b;
}
}
d=opts.duration;
//scrollId = setInterval(scrollFunc, opts.scrollDelay);
if(scrollId) clearTimeout(scrollId);
scrollId = setTimeout(scrollFunc, opts.scrollDelay);
}
function start(){
rollId = setInterval(function(){
rollFunc();
}, opts.time*1000);
}
function stop(){
clearInterval(rollId);
}
function easeOutQuad(t,b,c,d){
return -c *(t/=d)*(t-2) + b;
}
function easeOutQuint(t,b,c,d){
return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
});
};
$.fn.kxbdSuperMarquee.defaults = {
isMarquee:false,//是å¦ä¸ºMarquee
isEqual:true,//æ‰€æœ‰æ»šåŠ¨çš„å…ƒç´ é•¿å®½æ˜¯å¦ç›¸ç‰,true,false
loop: 0,//循环滚动次数，0æ—¶æ— é™
newAmount:3,//åŠ é€Ÿæ»šåŠ¨çš„æ¥é•¿
eventA:'mousedown',//é¼ æ ‡äº‹ä»¶ï¼ŒåŠ é€Ÿ
eventB:'mouseup',//é¼ æ ‡äº‹ä»¶ï¼ŒåŽŸé€Ÿ
isAuto:true,//是å¦è‡ªåŠ¨è½®æ¢
time:5,//åœé¡¿æ—¶é—´ï¼Œå•ä½ä¸ºç§’
duration:50,//缓动效果，å•æ¬¡ç§»åŠ¨æ—¶é—´ï¼Œè¶Šå°é€Ÿåº¦è¶Šå¿«ï¼Œä¸º0æ—¶æ— ç¼“åŠ¨æ•ˆæžœ
eventGo:'click', //é¼ æ ‡äº‹ä»¶ï¼Œå‘å‰å‘åŽèµ°
direction: 'left',//滚动方å‘，'left','right','up','down'
scrollAmount:1,//æ¥é•¿
scrollDelay:10,//时长
eventNav:'click'//导航事件
};
$.fn.kxbdSuperMarquee.setDefaults = function(settings) {
$.extend( $.fn.kxbdSuperMarquee.defaults, settings );
};
})(jQuery);