宇扬信息科技工作室

Jquery水平滚动条插件–hScrollPane

发布: 2013-01-26 21:20:23 | 作者: 不详 | 来源: 本站整理 | 查看: 1157

可以实现滑动、鼠标拖动、滑轮滚动等多种效果!最少仅需传入一个参数:
$(".container").hScrollPane({
        mover:".press"
});


效果图:
 Jquery水平滚动条插件

功能介绍:
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个多月,已在许多项目中接受过考验并逐渐完善。今天整理了一下代码正式发布跟各位共享,欢迎反馈您的意见和建议。

    评论 0 次    最新评论(评论内容只代表网友观点,与本站立场无关!)
    发表评论
    点击更换验证码  

    ·本站大部分文章和内容来自互联网,如果您觉得我们侵犯了您的权益,请告诉我们!

    ·您在本站发表的作品,本站有权在网站内转载或引用!

    ·本站所提供的设计,摄影及其它作品,如需使用,请与原作者联系,版权归原作者所有。

    About 宇扬联系我们付款方式友情链接网站地图版权声明投稿须知帮助