js--动态修改div的border-shadow

最新推荐文章于 2024-08-25 04:02:20 发布

珊珊333333

最新推荐文章于 2024-08-25 04:02:20 发布

阅读量3.4k

点赞数

分类专栏： js

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果：

照着不记得在哪个网站下载的例子写的

代码：

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
  <div id="box"></div>
  <div class="slidecontainer">
    <input type="range" min="1" max="100" value="1" class="slider" id="myRange">
    <p>box-shadow 
      <span style="color: #fff">:</span> 
      <span id="shadow-info">0 1px 2px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.46)</span>
      <span style="color: #fff"> ;</span>
    </p>
  </div>
</div>
  <script type="text/javascript">
  var slider = document.getElementById("myRange");
  var box = document.getElementById("box");
  var shadowInfo = document.getElementById("shadow-info");

  slider.oninput = function() {

    var v = this.value;

    var largeShadow = `0 ${(v/3).toFixed(0)}px ${v}px rgba(0, 0, 0, ${(.5 - (v/ 500)).toFixed(2)})`;
    var smallShadow = `0 ${(v/1.5).toFixed(0)}px ${(v*1.5).toFixed(0)}px rgba(0, 0, 0, ${(.5 - (v/ 50)).toFixed(2)})`;

    var shadow = largeShadow + ", " + smallShadow;

    if( (.5 - (v/ 50)).toFixed(2) <= 0 ){
      shadow = largeShadow;
    }

    box.style.boxShadow = shadow;
    shadowInfo.innerText = shadow;

  }
  </script>
</body>
</html>