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