Question

<!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的值。任何帮助将不胜感激

Answer 1

以下是使用 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事件并使用css更改javascript

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

请运行以上代码段

Here is a working DEMO

输入范围来调节模糊值

1 个答案: