一. 基础使用设置
注意：在网页的头部引用jQuery和abScrollBar两个必需的js既将jquery和abScrollBar包含在head标中或位于关闭正文标记之前。请确保在abScrollBar之前包含jquery前后顺序不能乱。
1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>domo-abScrollBar演示例子</title>
6. <script type="text/javascript" src="js/jquery.min.js"></script> <!-- 必须存在1 -->
7. <script type="text/javascript" src="js/jquery.abScrollBar-v1.2.min.js"></script> <!-- 必须存在2 -->
8. </head>
9. <body>
二. 编写html代码
注意：创建一个div的父层，如此例子abScrollBar-main。在其内部创建一个包裹层.abScrollBar-box和滚动条必须的内容层如.content，添加css样式进行控制外观，并按照您的喜好定位。
1. <div class="abScrollBar-main">
2. <div class="abScrollBar-box">
3. <div class="content"> <!-- 此为滚动条必须的内容父层，添加调用时需要用到此处的class名 -->
4. <p>你的滚动条框架层里的内容</p> <!-- 此处添加你的滚动框架里内容，此演示为P标签，样式自行添加修改。 -->
5. </div>
6. </div>
7. </div>
三. 编写例子css样式
注意：编写 html 和 css 样式时一定要注意，父层元素和容器层元素，都必须具有指定的宽度和高度，jquery.abScrollBar.min.js 才能正常的工作。
1. <style type="text/css">
2. * { margin:0; padding:0; }
3. body { background:#0c91e8; font-size:12px; color:#183b52; }
4. ul,li { list-style:none; }
5. p { word-wrap:break-word; }
6. img { border:0; vertical-align:middle; }
7. a { color:#eef7fe; text-decoration:none; }
8. a:hover { color:#fff; text-decoration:none; }
9. .abScrollBar-main { width:320px; height:465px; margin:0 auto; background:#fff;
10. border:1px solid #fff; border-radius:30px; }
11. .abScrollBar-box { width:320px; height:400px; margin:30px 0 0 0; background:#fff; overflow: hidden; }
12. position: relative; }
13. /* .abScrollBar-box .content为内容父层，添加调用时需要用到此处的class名 */
14. .abScrollBar-box .content { color: #555; padding: 0px 30px; }
15. .abScrollBar-box .content p { line-height: 24px; font-size:14px; padding:15px 0; text-indent:2em;
16. border-bottom:1px solid #f5f5f5; }
17. /* 自定义的滚动条样式 */
18. .abScrollBar-box .bar { background:#fafafa; }
19. .abScrollBar-box .bar em { background:#4ad585; }
20. </style>
四. 调用参数的设置
注意：在要使用效果的div父层abScrollBar-main外，放置调用代码即可实现效果。建议把每个页面的调用，统一放在页尾</body> </html>标签关闭之前，或统一js文件内引用，方便维护与管理。
1. <script type="text/javascript">
2. $(document).ready(function () {
3. abScrollBar({
4. scrollType: "y", /* 默认=y, x=水平方向滑动, y=垂直方向滑动 */
5. contentEl: ".content", /* 滚动条内容层 */
6. barClass: "bar", /* 自定义的滚动条样式 */
7. barBgClass: "bar-bg", /* 滚动条背景样式 */
8. width: 320, /* 滚动内容宽度，此例子宽度等于abScrollBar-box层的宽度 */
9. height: 400, /* 滚动内容高度，此例子高度等于abScrollBar-box层的高度 */
10. barWidth: 10, /* 默认6, 滚动条宽度 */
11. isHideBar: true, /* 当鼠标离开容器区域，默认为 false 时显示滚动条，为true时隐藏滚动条 */
12. mousewheelStep: 30 /* 默认=30，鼠标轮滚步长 */
13. });
14. });
15. </script>
16. </body>
17. </html>
更新记录
abScrollBar通过鼠标滑动来实现查看滚动框里的内容。可选择横或竖呈现，可自定义滚动条样式，默认也可以
选择隐藏或显示滚动状态条。计划在一个版本中给插件增加可点击的上下左右方向箭头。
abScrollBar基于jquery运行的滚动条特效插件
Copyright © 2010-2023 www.geshai.com, Geshai Team, All Rights Reserved.
QQ交流群(一)158544200(二)790370978可反馈问题