zoukankan      html  css  js  c++  java
  • 自定义滚动条样式jquery.tinyscrollbar.min.js 插件

    -jquery.tinyscrollbar.min.js 自定义滚动条样式

    代码如下

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tiny Scrollbar: A lightweight jQuery plugin</title>
        <link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>
        
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#scrollbar1').tinyscrollbar();    
            });
        </script>    
    
        <style type="text/css" >
    #scrollbar1 { width: 520px; margin: 20px 0 10px; }
    #scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
    #scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
    #scrollbar1 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
    #scrollbar1 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
    #scrollbar1 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
    #scrollbar1 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
    #scrollbar1 .disable { display: none; }
    .noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
        </style>
            
    </head>
    <body>
        <div id="scrollbar1">
            <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
            <div class="viewport">
                 <div class="overview">
                            这里放内容  转载请注明来源: http://www.cnblogs.com/wangtongphp/archive/2013/05/27/3101321.html      
                </div>
            </div>
        </div>    
    </body>
    </html>
  • 相关阅读:
    node vue 项目部署问题汇总
    Java删除空字符:Java8 & Java11
    moco固定QPS接口升级补偿机制
    Selenium4 IDE特性:无代码趋势和SIDE Runner
    JsonPath工具类单元测试
    Mac上测试Internet Explorer的N种方法
    JsonPath工具类封装
    Selenium4 IDE,它终于来了
    质量保障的方法和实践
    JsonPath实践(六)
  • 原文地址:https://www.cnblogs.com/wangtongphp/p/3101321.html
Copyright © 2011-2022 走看看