可以实现滑动、鼠标拖动、滑轮滚动等多种效果!最少仅需传入一个参数:
$(".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>Eyeminded 致力于提供专业的各类网站开发服务;极富视觉享受的平面及动画设计制作服务;高效益的网站重构服务。我们是一群追求技术创造价值的青年,有着丰富的行业经验。</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时内容的移动距离;
PS:接手的项目经常有需要水平滚动条的效果,本想在网上找个比较成熟完善的插件直接套用,发现大都是垂直方向的滚动条插件【推荐jScrollPane】,所以干脆响应毛主席的号召:自己动手,丰衣足食!hScrollPane从最初成型至今已有8个多月,已在许多项目中接受过考验并逐渐完善。今天整理了一下代码正式发布跟各位共享,欢迎反馈您的意见和建议。
·本站大部分文章和内容来自互联网,如果您觉得我们侵犯了您的权益,请告诉我们!
·您在本站发表的作品,本站有权在网站内转载或引用!
·本站所提供的设计,摄影及其它作品,如需使用,请与原作者联系,版权归原作者所有。