187 lines
5.8 KiB
JavaScript
187 lines
5.8 KiB
JavaScript
/*
|
||
http://www.rjboy.cn
|
||
By sean at 2010.06 - 2011.03
|
||
|
||
Demo:
|
||
$(".container").hScrollPane({
|
||
mover:".press", //指定container对象下的哪个元素需要滚动位置 | 必传项;
|
||
moverW:function(){return $(".press").width();}(), //传入水平滚动对象的长度值,不传入的话默认直接获取mover的宽度值 | 可选项;
|
||
handleMinWidth:300, //指定handle的最小宽度,要固定handle的宽度请在css中设定handle的width属性（如 width:28px!important;），不传入则不设定最小宽度 | 可选项;
|
||
showArrow:true, //指定是否显示左右箭头，默认不显示 | 可选项;
|
||
dragable:false, //指定是否要支持拖动效果，默认可以拖动 | 可选项;
|
||
handleCssAlter:"draghandlealter", //指定拖动鼠标时滚动条的样式，不传入该参数则没有变化效果 | 可选项;
|
||
easing:true, //滚动是否需要滑动效果,默认有滑动效果 | 可选项;
|
||
mousewheel:{bind:true,moveLength:500} //mousewheel: bind->'true',绑定mousewheel事件; ->'false',不绑定mousewheel事件；moveLength是指定鼠标滚动一次移动的距离,默认值：{bind:true,moveLength:300} | 可选项;
|
||
});
|
||
*/
|
||
|
||
(function($){
|
||
$.extend(jQuery.easing,{
|
||
easeOutQuint: function (x, t, b, c, d) {
|
||
return c*((t=t/d-1)*t*t*t*t + 1) + b;
|
||
}
|
||
});
|
||
|
||
$.fn.hScrollPane=function(settings){
|
||
settings=$.extend(true,{},$.fn.hScrollPane.defaults,settings);
|
||
this.each(function(){
|
||
var container=$(this),
|
||
mover=container.find(settings.mover),
|
||
w=container.width(),
|
||
c=settings.moverW || mover.width(),
|
||
dragbar=(container.find(".hScrollPane_dragbar").length==0 && c>w ) ? container.append('<div class="hScrollPane_dragbar"><div class="hScrollPane_draghandle"></div></div>').find(".hScrollPane_dragbar") : container.find(".hScrollPane_dragbar"),//避免多次初始化时的重复append;
|
||
handle=dragbar.find(".hScrollPane_draghandle");
|
||
|
||
if(settings.showArrow){
|
||
container.append('<a href="###" class="hScrollPane_leftarrow"></a><a href="###" class="hScrollPane_rightarrow"></a>');
|
||
leftArrow=container.find(".hScrollPane_leftarrow");
|
||
rightArrow=container.find(".hScrollPane_rightarrow");
|
||
dragbar.css({
|
||
width:container.width()-leftArrow.outerWidth()*2,
|
||
left:leftArrow.outerWidth()
|
||
});
|
||
leftArrow.unbind();
|
||
rightArrow.unbind();
|
||
}else{
|
||
dragbar.css("width",container.width());
|
||
}
|
||
|
||
mover.stop().css("left","0px");
|
||
container.unbind();//避免多次初始化时的事件重复绑定;
|
||
handle.unbind();
|
||
dragbar.unbind();
|
||
|
||
handle.stop().css({
|
||
width:(w/c)*w >settings.handleMinWidth ? (w/c)*w : settings.handleMinWidth,
|
||
left:0
|
||
});
|
||
|
||
if(c<w){
|
||
dragbar.hide();
|
||
return false;
|
||
}else{
|
||
dragbar.show();
|
||
}
|
||
|
||
// 添加
|
||
container.bind("mouseenter", function(e){
|
||
console.log('hover')
|
||
dragbar.css('opacity', 1);
|
||
})
|
||
|
||
container.bind("mouseleave", function(e){
|
||
dragbar.css('opacity', 0);
|
||
console.log('hover1')
|
||
return false;
|
||
})
|
||
|
||
//
|
||
|
||
|
||
var maxlen=parseInt(dragbar.width())-parseInt(handle.outerWidth());
|
||
|
||
dragbar.bind("click",function(e){
|
||
var flag=e.pageX>handle.offset().left+handle.outerWidth() ? -1 : 1;
|
||
$.fn.hScrollPane.move(settings,mover,handle,w,c,maxlen,flag);
|
||
});
|
||
|
||
handle.bind("mousedown",function(e){
|
||
var x=e.pageX;
|
||
var hx=parseInt(handle.css("left"));
|
||
if(settings.handleCssAlter){$(this).addClass(settings.handleCssAlter);}
|
||
|
||
$(document).bind("mousemove",function(e){
|
||
var left=e.pageX-x+hx<0?0:(e.pageX-x+hx>=maxlen?maxlen:e.pageX-x+hx);
|
||
handle.stop().css({left:left});
|
||
if(settings.easing){
|
||
mover.stop().animate({
|
||
left:-left/maxlen*(c-w)
|
||
},{duration:1500,easing:'easeOutQuint',queue:false});
|
||
}else{
|
||
mover.css({left:-left/maxlen*(c-w)});
|
||
}
|
||
|
||
return false;
|
||
});
|
||
$(document).bind("mouseup",function(){
|
||
if(settings.handleCssAlter){handle.removeClass(settings.handleCssAlter);}
|
||
$(this).unbind("mousemove");
|
||
})
|
||
return false;
|
||
}).click(function(){
|
||
return false;
|
||
})
|
||
|
||
if(settings.dragable){
|
||
mover.bind("mousedown",function(e){
|
||
var x=e.pageX;
|
||
$(this).bind("mousemove",function(e){
|
||
$.fn.hScrollPane.move(settings,mover,handle,w,c,maxlen,x,e.pageX);
|
||
return false;
|
||
})
|
||
$(document).bind("mouseup",function(){
|
||
mover.unbind("mousemove");
|
||
})
|
||
})
|
||
}
|
||
|
||
if(settings.mousewheel.bind){
|
||
container.bind("mousewheel",function(event, delta){
|
||
$.fn.hScrollPane.move(settings,mover,handle,w,c,maxlen,delta);
|
||
return false;
|
||
});
|
||
}
|
||
|
||
if(settings.showArrow){
|
||
leftArrow.click(function(){
|
||
$.fn.hScrollPane.move(settings,mover,handle,w,c,maxlen,1);
|
||
return false;
|
||
}).focus(function(){this.blur();});
|
||
|
||
rightArrow.click(function(){
|
||
$.fn.hScrollPane.move(settings,mover,handle,w,c,maxlen,-1);
|
||
return false;
|
||
}).focus(function(){this.blur();});
|
||
}
|
||
|
||
this.ondragstart=function(){return false;}
|
||
this.onselectstart=function(){return false;}
|
||
|
||
})
|
||
}
|
||
|
||
$.fn.hScrollPane.defaults = {
|
||
showArrow:false,
|
||
handleMinWidth:0,
|
||
dragable:true,
|
||
easing:true,
|
||
mousewheel:{bind:true,moveLength:300}
|
||
};
|
||
|
||
$.fn.hScrollPane.move=function(settings,mover,handle,w,c,maxlen,x,nx){
|
||
if(arguments.length==7){
|
||
var left=parseInt(mover.css("left"))+x*settings.mousewheel.moveLength;
|
||
}else{
|
||
var left=parseInt(mover.css("left"))+((nx-x)/w)*(c-w);
|
||
}
|
||
left=left.toFixed(0);
|
||
left=left>0?0:left<w-c?w-c:left;
|
||
var handle_left=(left/(w-c))*maxlen;
|
||
|
||
if(settings.easing){
|
||
mover.stop().animate({
|
||
left:left
|
||
},{duration:1500,easing:'easeOutQuint',queue:false});
|
||
|
||
handle.stop().animate({
|
||
left:handle_left
|
||
},{duration:1500,easing:'easeOutQuint',queue:false});
|
||
}else{
|
||
mover.stop().animate({
|
||
left:left
|
||
},{duration:5,queue:false});
|
||
|
||
handle.css({left:handle_left});
|
||
}
|
||
}
|
||
})(jQuery); |