jquery.abScrollBars实现页面内模拟滚动条效果代码
代码语言:html
所属分类:加载滚动
代码描述:页面内模拟滚动条
代码标签: jquery.abScrollBars 页面 模拟 滚动条
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!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">
<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>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.abScrollBar-v1.2.min.js"></script>
</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://www.bootstrapmb.com" title="abScrollBar v1.0" target="_blank">abScrollBar</a></h2>
<p style="font-size:13px;font-style:italic;color:#ddf0fb;">页面内模拟滚动条 v1.2</p>
</div>
</div>
<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:0 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>
<div class="abScrollBar-main">.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0