zoukankan      html  css  js  c++  java
  • 自定义滚动条

    cv党:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    #out{border: 1px solid black; 600px;overflow: hidden;}
    #inner{white-space: nowrap;font-size: 0;}
    #inner div{ 400px;height: 300px;display: inline-block;text-align: center;line-height: 300px;
    outline: 1px solid blueviolet;font-size: 30px;}
    #scrollout{ 600px;height: 20px;border: 1px solid black;}
    #scrollinner{height: 100%;background-color: chartreuse;border-radius:3px;margin-left: 0;}
    </style>
    </head>
    <body>
    <div id="out"><div id="inner">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    </div></div>
    <div id="scrollout"><div id="scrollinner"></div></div>
    </body>
    </html>
    <script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script>
    <script type="text/javascript">
    myScroll($("#out"),$("#inner"),$("#scrollinner"))
    function myScroll(mainout,maininner,scrollInner){
    function countwidth(){
    return maininner.children().length*maininner.children().eq(0).width()
    }
    var thewidth =countwidth() ////拖块的宽度计算
    scrollInner.width(mainout.width()* mainout.width()/thewidth);
    var ismove = false; ////查看鼠标是否按下
    var oldX /////记录初始位置
    scrollInner.mousedown(function(e){
    ismove = true
    oldX=parseInt(e.clientX)
    })
    $(document).mouseup(function(){
    ismove = false
    })
    $(document).mousemove(function(e){
    console.log(ismove);
    if(!ismove) return
    var newX=parseInt(e.clientX)
    var distance=newX-oldX;
    if(parseInt(scrollInner.css("margin-left"))<=0&&distance<0){ ////判断是否超出左边界
    return
    }
    if(distance>0&&parseInt(scrollInner.css("margin-left"))>= mainout.width()-scrollInner.width()){////判断是否超出右边界
    return
    }
    var marginLeft=parseInt(scrollInner.css("margin-left"))+ +distance
    marginLeft = marginLeft<0?0:marginLeft;//////超出左边
    marginLeft = (marginLeft> mainout.width()-scrollInner.width())? mainout.width()-scrollInner.width():marginLeft ////超出右边
    scrollInner.css("margin-left",marginLeft);
    maininner.css("margin-left",-marginLeft*thewidth/ mainout.width())
    oldX=newX
    })
    }

    </script>

  • 相关阅读:
    C# RabbitMQ
    使用HttpClient和WebRequest时POST一个对象的写法
    HTTP中application/x-www-form-urlencoded字符说明
    MVC5 Entity Framework学习
    SQL Server安全
    Entity Framework查询
    COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-000000000046} 的组件失败,原因是出现以下错误: 80070005 拒绝访问。最新解决方案
    js中精度问题以及解决方案
    string.format
    t-sql对被除数为0&除数小于被除数结果为0&除法保留2位小数的处理
  • 原文地址:https://www.cnblogs.com/ccgdnf/p/5438895.html
Copyright © 2011-2022 走看看