为什么这个JavaScript css过滤器代码可以在Firefox中使用，但不能在Chrome中使用？

这些过滤器在Firefox（43.0.1）中协同工作，但不在Chrome（57.0.2987.133）中工作。在Chrome中，当我将鼠标移到另一个滑块上时，上一个滑块的调整将被删除。有关于图片过滤器的类似问题，但它适用于Firefox和Chrome的问题。为什么这个JavaScript css过滤器代码可以在Firefox中使用，但不能在Chrome中使用？

var degrees=0; 
 
var percentB=100; 
 
var percentC=100; 
 
function setValues() { 
 
    form1.brightness.value=100; 
 
    form1.contrast.value=100; 
 
    form1.hue.value=0; 
 
} 
 

 
function bright() { 
 
    percentB=form1.brightness.value; 
 
    document.getElementById("I").style.filter="brightness("+parseInt(percentB)+"%)"+" contrast("+parseInt(percentC)+"%)"+" hue-rotate("+parseInt(degrees)+"deg)"; 
 
} 
 

 
function cont() { 
 
    percentC=form1.contrast.value; 
 
    document.getElementById("I").style.filter="brightness("+parseInt(percentB)+"%)"+" contrast("+parseInt(percentC)+"%)"+" hue-rotate("+parseInt(degrees)+"deg)"; 
 
} 
 

 
function hues() { 
 
    degrees=form1.hue.value; 
 
    document.getElementById("I").style.filter="brightness("+parseInt(percentB)+"%)"+" contrast("+parseInt(percentC)+"%)"+" hue-rotate("+parseInt(degrees)+"deg)"; 
 
}

<img src="xbutterfly.jpg" alt="Colorful Flowers" width="800" height="533" id="I" /><br><br> 
 

 
<form name="form1" id="form1id" style="font-size:90%; text-align:center;"> 
 
    Brightness: <input type="range" name="brightness" min="0" max="200" step="5" onmousemove="bright()" style="vertical-align:-7px;" />&nbsp; &nbsp; Contrast: <input type="range" name="contrast" min="0" max="200" step="5" onmousemove="cont()" style="vertical-align:-7px;" 
 
    />&nbsp; &nbsp; Hue: <input type="range" name="hue" min="0" max="360" step="5" onmousemove="hues()" style="vertical-align:-7px;" /> 
 
</form>

来源

2017-04-26 TonyLuigiC

https://jsfiddle.net/anzhdjnt/它适用于我的FF＆你用哪个chorome的Chrome版本 –

？ –

适用于我的Chrome Chrome（57.0.2987.133）https://jsfiddle.net/Legendary/4z8zmd7c/1/示例 – Leguest

这个2小时的战斗后，我终于看到了张贴的问题后的解决方案：一切组合成一个功能。

新的HTML：

<img src="xbutterfly.jpg" alt="Colorful Flowers" width="800" height="533" id="I" /><br><br> 
    <form name="form1" id="form1id" style="font-size:90%; text-align:center;"> 
    Brightness: <input type="range" name="brightness" min="0" max="200" step="5" onmousemove="apply()" style="vertical-align:-7px;" />&nbsp; &nbsp; 
    Contrast: <input type="range" name="contrast" min="0" max="200" step="5" onmousemove="apply()" style="vertical-align:-7px;"/>&nbsp; &nbsp; 
    Hue: <input type="range" name="hue" min="0" max="360" step="5" onmousemove="apply()" style="vertical-align:-7px;"/> 
    </form>

新的JavaScript：

<script type="text/javascript"> 
    <!-- 

    var degrees = 0; 
    var percentB = 100; 
    var percentC = 100; 

    function setValues() 
    {  
    form1.brightness.value = 100; 
    form1.contrast.value = 100; 
    form1.hue.value = 0;  
    } 

    function apply() 
    { 
    degrees = form1.hue.value; 
    percentC = form1.contrast.value; 
    percentB = form1.brightness.value; 
    document.getElementById("I").style.filter = "brightness(" + parseInt(percentB) + "%)" + " contrast(" + parseInt(percentC) + "%)" + " hue-rotate(" + parseInt(degrees) + "deg)"; 
    document.getElementById("I").style.WebkitFilter = "brightness(" + parseInt(percentB) + "%)" + " contrast(" + parseInt(percentC) + "%)" + " hue-rotate(" + parseInt(degrees) + "deg)"; // Not tested as I don't have these browsers. Used for older versions of Safari, Chrome, and Opera per https://www.w3schools.com/jsref/prop_style_filter.asp 
    } 

    --> 
    </script>

来源

2017-04-26 10:44:01 TonyLuigiC

为什么这个JavaScript css过滤器代码可以在Firefox中使用，但不能在Chrome中使用？

回答

相关问题