Jquery水平滚动条插件

可以实现滑动、鼠标拖动、滑轮滚动等多种效果!最少仅需传入一个参数:

$(".container").hScrollPane({
	mover:".press"
});

功能介绍:
1、支持滚动内容时的滑动效果;
2、支持鼠标拖动效果及滑轮滚动效果;
3、拖动滚动条时可选择变换样式,实现高仿真滚动条效果;
4、可限定滚动条的最小宽度,默认滚动条宽度适应滚动内容的长短;
5、支持是否显示左右箭头。

使用方法:

$(".container").hScrollPane({
	mover:".press", //必需项;
	moverW:function(){return $(".press").width();}(),
	handleMinWidth:300, 
	showArrow:true, 
	dragable:false, 
	handleCssAlter:"draghandlealter",
	easing:true,
	mousewheel:{bind:true,moveLength:500} 
});

参数说明:
○ “.container”是需要添加滚动条的对象,该对象要包含一个被移动的对象。滚动条会append到该对象后面。如下面的html结构:

<div class="container">
	<div class="press">
             <p>致力于提供专业的各类网站开发服务;极富视觉享受的平面及动画设计制作服务;高效益的网站重构服务。我们是一群追求技术创造价值的青年,有着丰富的行业经验。</p>
        </div>
        <!--滚动条会append到这里-->
</div>

“.container”的position需要设置为relative或absolute;“.press”是被移动的对象,他的position属性需设置为absolute,因为脚本需要通过改变它的left值来实现内容滚动效果。给“.container”绑定脚本后,页面上所有的“.container”对象都能实现滚动条效果;
○ mover:必需项。指定container对象下的哪个元素需要滚动位置;
○ moverW:可选项。传入水平滚动对象的长度值,不传入的话默认直接获取mover的宽度值。对于滚动对象为li列表,而li又设置了margin-right值,要让滚动条滚动到最后时不出现多于的空白,可以指定该值,具体示例请参看demo页中的最后一个示例;
○ handleMinWidth:可选项。指定滚动条的最小宽度,要固定滚动条的宽度请在css中设定滚动条的width值(如width:28px!important;),不传入则不设定最小宽度,默认滚动条宽度是根据滚动内容的长短计算;
○ showArrow:可选项。指定是否显示左右箭头,默认不显示 ;
○ dragable:可选项。指定是否要支持拖动效果,默认拖动内容对象有滚动效果;
○ handleCssAlter:可选项。传入拖动鼠标时要给滚动条添加的class名,不传入该参数则滚动条不会有变化效果;
○ easing:可选项。滚动内容时是否需要滑动效果,默认有滑动效果;
○ mousewheel:可选项。mousewheel: bind->’true’,绑定mousewheel事件; ->’false’,不绑定mousewheel事件;moveLength是指定鼠标滚动一次移动的距离,默认值:{bind:true,moveLength:300},例如想改变每次滑轮滑动内容移动的距离,该参数可以这样写:mousewheel:{moveLength:600},注意该值也是点击drag bar时内容的移动距离;

演示地址:Jquery水平滚动演示
下载地址:Jquery水平滚动下载

Leave a Reply

(will not be published)