码迷,mamicode.com
首页 > Web开发 > 详细

基于jQuery的滚动条插件-jquery.jscrollbar

时间:2014-05-01 14:29:41      阅读:444      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   javascript   ext   width   color   get   文件   

jquery.jscrollbar 是一个基于jQuery的滚动条插件,支持水平滚动条和垂直滚动条,支持鼠标键盘事件

主要功能

  1. 支持水平滚动条
  2. 支持垂直滚动条
  3. 自动判断水平滚动条和垂直滚动条是否显示
  4. 支持外部调用来滚动内容
  5. 支持滚动条部分样式自定义
  6. 支持键盘方向键控制
  7. 支持鼠标滚动(需要mousewheel插件)
  8. 支持滚动条显示位置设置(外部|悬浮)
  9. 支持手动更新界面

依赖的库

  1. jQuery (http://jquery.com/)
  2. jquery.jqdrag (https://github.com/daiying-zhang/jquery.jqdrag)
  3. jquery.mousewheel (插件已经包含在本项目中,文件:jquery.mousewheel.min.js)

使用步骤

1.在head或者body中引入下列文件:

<!--必须引入-->
<script type="text/javascript" src="your-path/jquery-1.8.1.min.js"></script>
<!--如果需要支持鼠标滚动则引入,否则可以不引用-->
<script type="text/javascript" src="your-path/require/jquery.mousewheel.min.js"></script>
<!--必须引入-->
<script type="text/javascript" src="your-path/require/jquery.jqdrag-1.0.min.js"></script>
<!--必须引入-->
<script type="text/javascript" src="your-path/min/jquery.jscrollbar-1.0.2.min.js"></script>
1.
2.
3.
4.
5.
6.
7.
8.

2.设置内容区域的大小:

<!--设置区域大小,包括滚动条-->
<div style="width:1300px;height:600px;">Some long text or other elements...</div>
1.
2.

3.调用插件:

<script>
    $(function(){
        $(‘#test1,#test2‘).jscrollbar({
            //some options
        });
    });
</script>
 

示例代码

<script>
    $(function(){
        $(‘#test1,#test2‘).jscrollbar({
            width:12, //滚动条宽度
            color:‘orange‘, //滚动条颜色
            opacity:0.7, //透明度
            position:‘inner‘, //滚动条位置
            mouseScrollDirection:‘horizontal‘ //鼠标滚动时滚动的方向
        });

        var jsb2 = $(‘#test2‘).jscrollbar(‘getObject‘);

        setTimeout(function(){
            $(‘#test2 img‘).css({width:‘4000px‘});
                //滚动实例的链式调用,无法使用jQuery操作DOM的方法 [不推荐]
                jsb2.updateUI()
                     .scrollTo(‘x‘,100)
                     .scrollBy(‘x‘,50);

                //jQuery的链式调用,可以使用jQuery操作DOM的方法  [推荐]
                $(‘#test1‘).jscrollbar(‘scrollBy‘,‘x‘,10)
                           .jscrollbar(‘scrollTo‘,‘x‘,300)
                           .animate({‘opacity‘:0.8},1000);
        },2000)
    });
</script>

插件代码

https://github.com/dingo826/jquery.jscrollbar

 

基于jQuery的滚动条插件-jquery.jscrollbar,码迷,mamicode.com

基于jQuery的滚动条插件-jquery.jscrollbar

标签:style   blog   class   code   java   javascript   ext   width   color   get   文件   

原文地址:http://www.cnblogs.com/websalon/p/3700724.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!