演示网站 abScrollBar模拟滚动条特效插件
编写代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>abScrollBar是一款基于jquery实现的页面内模拟滚动条插件</title>
<meta name="keywords" content="格晒特效,格晒插件,abScrollBar,jQuery插件" />
<meta name="description" content="格晒js特效插件abScrollBar.js是一款基于jQuery运行的滚动条开源特效插件，体积小巧使用简单的js模拟滚动条小插件，它可以通过鼠标中轴滑动页面内模拟滚动条，或鼠标拖动滚动条查看滚动框架里的内容，支持自定义滚动条样式。兼容IE6+ Safari Opera Firefox Chrome 等大部分浏览器。" />
<script src="js/jquery.min.js"></script><!-- jquery.min.js必须存在 -->
<script type="text/javascript" src="js/jquery.abScrollBar-v1.2.min.js"></script><!-- jquery.abScrollBar-v1.2.min.js必须存在 -->
<style type="text/css">
* { margin:0; padding:0; }
body { background:#0c91e8; font-size:12px; color:#333; }
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; }
</style>
</head>
<body>
<!-- 头部开始 -->
<div style="text-align:center;padding:100px 0 150px 0;">
<div class="logo z">
<h2 style="color:#ebf7fe;font-size:38px;line-height:50px;font-weight:bold;font-style:italic;"><a href="http://ab.geshai.com/other-plus/abScrollBar/abScrollBar.html" title="abScrollBar v1.0" target="_blank">abScrollBar</a></h2>
<p style="font-size:13px;font-style:italic;color:#ddf0fb;">页面内模拟滚动条 v1.2</p>
</div>
</div>
<!-- 头部结束 -->
<!-- 插件效果 css1 开始 -->
<style type="text/css">
.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 { 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-bg { background:#fafafa; }
.abScrollBar-box .bar { background:#4ad585; }
</style>
<!-- 插件效果 css1 结束 -->
<!-- 插件HTML代码1效果开始 -->
<div class="abScrollBar-main">
<div class="abScrollBar-box">
<div class="content">
<p style="color:#4ad585; font-size:15px; font-style:italic; font-weight:bold;">鼠标放这里上下滚动试试</p>
<p>以下内容仅为测试滚动条效果</p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！</p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！</p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！</p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！</p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！</p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！</p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！</p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！</p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！</p>
</div>
</div>
</div>
<!-- 插件HTML代码1效果结束// -->
<!-- 插件js代码1调用开始 -->
<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>
<!-- 插件js代码调1用结束 -->
<div style="height:100px;"></div>
<!-- 插件效果 css2 开始 -->
<style type="text/css">
.abScrollBar-main2 { width:620px; height:125px; margin:0 auto; background:#fff; border:1px solid #fff; border-radius:30px; }
.abScrollBar-box2 { width:560px; height:65px; padding:30px; background:#fff; overflow: hidden; position: relative; border-radius:30px; }
.abScrollBar-box2 .content2 { color: #555; }
.abScrollBar-box2 .content2 p { float: left; line-height: 24px; font-size:14px; padding:15px; border-bottom:1px solid #f5f5f5; }
/* 自定义的滚动条样式 */
.abScrollBar-box2 .bar2-bg { background:#fafafa; }
.abScrollBar-box2 .bar2 { background:#4ad585; }
</style>
<!-- 插件效果 css2 结束 -->
<!-- 插件HTML代码2效果开始 -->
<div class="abScrollBar-main2">
<div class="abScrollBar-box2">
<div class="content2">
<p style="color:#4ad585; font-size:15px; font-style:italic; font-weight:bold;">鼠标放这里上下滚动试试</p>
<p>以下内容仅为测试滚动条效果</p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！</p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！” </p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！”</p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！</p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！ </p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！</p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！</p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！</p>
<p>醋和酱油打架，引来很多围观的人。醋得意洋洋说：哈哈，他们来帮我了！酱油问：你怎么知道？“因为他们都是来打酱油的！</p>
</div>
</div>
</div>
<!-- 插件HTML代码2效果结束// -->
<!-- 插件js代码2调用开始 -->
<script type="text/javascript">
$(document).ready(function () {
abScrollBar({
scrollType: "x", /* 默认=y, x=水平方向滑动, y=垂直方向滑动 */
contentEl: ".content2", /* 滚动内容层 */
barClass: "bar2", /* 自定义的滚动条样式 */
barBgClass: "bar2-bg", /* 滚动条背景样式 */
width: 560, /* 滚动内容宽度，此例子宽度等于abScrollBar-box层的宽度 */
height: 65, /* 滚动内容高度，此例子高度等于abScrollBar-box层的高度 */
barHeight: 10, /* 默认6, 滚动条高度 */
isHideBar: true, /* 当鼠标离开容器区域，默认为 false 时显示滚动条，为true时隐藏滚动条 */
mousewheelStep: 30 /* 默认=30，鼠标轮滚步长 */
});
});
</script>
<!-- 插件js代码2调用结束 -->
<div style="height:400px;"></div>
<div style="text-align:center">
<h6 style="font-size:18px;height:60px;line-height:50px;color:#183b52;font-weight:700;font-style:italic;">abcrollBar基于jquery运行的开源滚动条特效插件</h6>
<p style="color:#183b52; line-height:24px; font-size:12px; padding:0 0 100px 0;">体积小巧使用简单的滚动条小插件，它可以通过鼠标中轴滑动页面内的模拟滚动条，或鼠标拖动滚动条查看滚动框架里的内容。<br>支持自定义滚动条的样式，滚动条可选择横或竖呈现，默认也可选择显示或隐藏滚动条。<br>兼容IE6+ Safari Opera Firefox Chrome等大部分浏览器。</p>
</div>
</body>
</html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
