用于调节模糊值的输入范围

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<style>
.imgBlur{
    width:800px;
    float:left;
    height: 450px;
    background: url(img.jpg) no-repeat left center;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(5px);
    filter: blur(20px);
    z-index: 1000;
}
</style>
<body class="body">
                        <input type="range" id="blurValue" class="blurValue" min="0" max="100" step="1"></input>
            <div class="imgBlur" id="imgBlur"></div>

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

大家好。我的 javascript 非常差，我在这里找不到我的泡菜在线解决方案。我正在尝试使此输入范围调整模糊div的值。任何帮助将不胜感激

这是您使用onChange event所需的解决方案

当范围改变时，我采用了一个函数，

 <input type="range" id="blurValue" class="blurValue" min="0" max="100" step="1" onChange="changed()"></input>
  function changed()
    {
      var obj = document.getElementById('imgBlur');
      obj.style["-webkit-filter"] = "blur("+document.getElementById("blurValue").value+"px)";
    }

这将捕获range change事件并使用javascript更改css

obj.style["-webkit-filter"] = "blur("+document.getElementById("blurValue").value+"px)";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<style>
.imgBlur{
    width:800px;
    float:left;
    height: 450px;
    background: url("https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/03/1458289957powerful-images3.jpg");
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(5px);
    filter: blur(20px);
    z-index: 1000;
}
</style>
<body class="body">
                        <input type="range" id="blurValue" class="blurValue" min="0" max="100" step="1" onChange="changed()"></input>
            <div class="imgBlur" id="imgBlur"></div>
<script>
  function changed()
  {
  
  var obj = document.getElementById('imgBlur');
obj.style["-webkit-filter"] = "blur("+document.getElementById("blurValue").value+"px)";
obj.style["-moz-filter"] = "blur("+document.getElementById("blurValue").value+"px)";
obj.style["-o-filter"] = "blur("+document.getElementById("blurValue").value+"px)";
obj.style["-ms-filter"] = "blur("+document.getElementById("blurValue").value+"px)";
obj.style["filter"] = "blur("+document.getElementById("blurValue").value+"px)";
  }
  
 
        </script>
</body>
</html>

请运行上面的代码片段

这是一个有效的演示

相关内容

最新更新

热门标签：