ぼかし値を調整する入力範囲

<!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の値を調整するようにしようとしています。すべてのヘルプはここぼかし値を調整する入力範囲

出典

2017-05-25 user3672407

は範囲が

<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を変更し、変更されたとき、私は機能をとっているonChange event

を使用して、必要なソリューションである理解されるであろう

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

上記のスニペットを実行してください

出典

2017-05-25 09:05:16 Sravan

ぼかし値を調整する入力範囲

答えて

関連する問題