zoukankan      html  css  js  c++  java
  • 自定义滚动条——控制div的大小和透明度

    <!DOCTYPE html>

    <html>

     

    <head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    #big {

    height: 20px;

    width: 600px;

    background-color: gray;

    position: relative;

    margin: 100px auto;

    }

     

    #small {

    height: 20px;

    width: 20px;

    background-color: red;

    position: absolute;

    left: 0;

    top: 0;

    }

     

    #side {

    width: 0px;

    height: 0px;

    background-color: green;

    }

    </style>

    </head>

     

    <body>

    <div id="big">

    <div id="small">

     

    </div>

    </div>

    <div id="side">

     

    </div>

    </body>

    <script type="text/javascript">

    //实现通过滚动条来控制另一个div的宽高和透明度

    //滚动条只能左右滚动

    var big = document.getElementById("big");

    var small = document.getElementById("small");

    var side = document.getElementById("side");

    var x = 0;

    var y = 0;

    small.onmousedown = function(ev) {

    var oEvent = ev || event;

    x = oEvent.clientX - small.offsetLeft;

    document.onmousemove = function(ev) {

    var oEvent = ev || event;

    var Left = oEvent.clientX - x;

    if(Left < 0) {

    Left = 0;

    } else if(Left > big.offsetWidth - small.offsetWidth) {

    Left = big.offsetWidth - small.offsetWidth;

    }

    small.style.left = Left + "px";

    //自定义一个变量scale

    //表示滚动条滚动的距离和滚动条可以滚动的最大距离的的比

    var scale = Left / (big.offsetWidth - small.offsetWidth);

    document.title = scale;

    //通过滑块控制side的大小

    side.style.width = 400 * scale + "px";

    side.style.height = 400 * scale + "px";

    //通过滑块控制side的颜色的透明度

    side.style.opacity = scale;

    side.style.filter = "alpha(opacity:" + scale * 100 + ")";

     

    }

    document.onmouseup = function() {

    document.onmousemove = null;

    document.onmouseup = null;

    }

    return false;

     

    }

    </script>

     

    </html>

  • 相关阅读:
    Spring Boot mybatis-starter介绍
    Spring Boot starter原理
    Spring Boot starter介绍以及自定义starter
    Spring Boot conditional注解介绍
    Spring Boot 配置类3-流程核心方法doProcessConfigurationClass
    Spring Boot 配置类2-解析逻辑(processConfigBeanDefinitions方法中的循环体)
    Ubuntu14.04下安装docker
    ubuntu安装docker
    Spring Cloud 统一配置
    第四章 springboot + swagger
  • 原文地址:https://www.cnblogs.com/niuniudashijie/p/6129928.html
Copyright © 2011-2022 走看看