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

最新推荐文章于 2023-07-14 11:20:38 发布

转载最新推荐文章于 2023-07-14 11:20:38 发布 · 3.5k 阅读

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的阴影效果动态调整案例。通过一个滑块，用户可以实时预览并调整元素的阴影大小和透明度，提供了一种直观的交互方式来观察CSS box-shadow属性的变化。

效果：

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

代码：

<!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>