插件介绍:
abScrollBar基于jquery运行的模拟滚动条特效插件。
体积小使用简单的滚动条小插件,通过鼠标滑动页面内的滚动条,或鼠标拖动滚动条查看滚动框里的内容。可自定义滚动条样式,可选横或竖呈现,默认可选显示或隐藏滚动条。
兼容IE6+ Safari Opera Firefox Chrome等大部分浏览器。
下载此演示例子:
百度网盘 ( zip资源包 )|阿里云盘 ( exe资源包 )
GitHub|Gitee

一. 基础使用设置

注意:在网页的头部引用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.    <link type="text/css" rel="stylesheet" href="abScrollBar.css" /> <!-- 1如不需箭头可不引用-->

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

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

9.  </head>

10.  <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.      propagation: true, /* 阻止滚动事件冒泡传播(默认=true) */

14.      isButton: true /* 是否启用滚动条按钮(默认=false) */

15.    });

16.  });

17.  </script>

18.  </body>

19.  </html>

返回首页|综合下载

abScrollBar基于jquery运行的滚动条特效插件

Copyright © 2010-2023 www.geshai.com, Geshai Team, All Rights Reserved.
QQ交流群(一)158544200(二)790370978可反馈问题

Top