建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery滚动条插件abScrollBar.js

来源:易助科技网浏览量:14收藏

简介


abScrollBar 基于 jquery 运行的滚动条特效插件。 体积小使用简单的滚动条小插件,通过鼠标滑动页面内的滚动条,或鼠标拖动滚动条查看滚动框里的内容。可自定义滚动条样式,可选横或竖呈现,默认可选显示或隐藏滚动条。 兼容 IE6+ Safari Opera Firefox Chrome 等大部分浏览器。

(下载的附件中附有完整DEMO)


使用

1.  引入文件


<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 必须存在1 -->

<script type="text/javascript" src="js/jquery.abScrollBar-v1.2.min.js"></script>
<!-- 必须存在2 -->


2.  HTML


<div class="abScrollBar-main">
  <div class="abScrollBar-box">
    <div class="content">
    <!-- 此为滚动条必须的内容父层,添加调用时需要用到此处的class名 -->
    
      <p>你的滚动条框架层里的内容</p>
      <!-- 此处添加你的滚动框架里内容,此演示为P标签,样式自行添加修改。 -->
    
    </div>
  </div>
</div>

[CSS]
<style type="text/css">
* { margin:0; padding:0; }
body { background:#0c91e8; font-size:12px; color:#183b52; } 
ul,li { list-style:none; }
p { word-wrap:break-word; }
img { border:0; vertical-align:middle; }
a { color:#eef7fe; text-decoration:none; }
a:hover { color:#fff; text-decoration:none; }
.abScrollBar-main { width:320px; height:465px; margin:0 auto; background:#fff; border:1px solid #fff; border-radius:30px; }
.abScrollBar-box { width:320px; height:400px; margin:30px 0 0 0; background:#fff; overflow: hidden; position: relative; }
/* .abScrollBar-box .content为内容父层,添加调用时需要用到此处的class名 */
.abScrollBar-box .content { color: #555; padding: 0px 30px; }
.abScrollBar-box .content p { line-height: 24px; font-size:14px; padding:15px 0; text-indent:2em; border-bottom:1px solid #f5f5f5; }
/* 自定义的滚动条样式 */
.abScrollBar-box .bar { background:#fafafa; }
.abScrollBar-box .bar em { background:#4ad585; }
</style>


3.  调用


<script type="text/javascript">
  $(document).ready(function () {
    abScrollBar({
      scrollType: "y",
      /* 默认=y, x=水平方向滑动, y=垂直方向滑动 */
      contentEl: ".content",
      /* 滚动条内容层 */
      barClass: "bar",
      /* 自定义的滚动条样式 */
      barBgClass: "bar-bg",
      /* 滚动条背景样式 */
      width: 320,
      /* 滚动内容宽度,此例子宽度等于abScrollBar-box层的宽度 */
      height: 400,
      /* 滚动内容高度,此例子高度等于abScrollBar-box层的高度 */
      barWidth: 10,
      /* 默认6, 滚动条宽度 */
      isHideBar: true,
      /* 当鼠标离开容器区域,默认为 false 时显示滚动条,为true时隐藏滚动条 */
      mousewheelStep: 30
      /* 默认=30,鼠标轮滚步长 */
      
    });
  });
</script>



相关链接

GitHub 地址 :https://github.com/xiaomingmm/abScrollBar