0
這些過濾器在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;" /> Contrast: <input type="range" name="contrast" min="0" max="200" step="5" onmousemove="cont()" style="vertical-align:-7px;"
/> Hue: <input type="range" name="hue" min="0" max="360" step="5" onmousemove="hues()" style="vertical-align:-7px;" />
</form>
https://jsfiddle.net/anzhdjnt/它適用於我的FF&你用哪個chorome的Chrome版本 –
? –
適用於我的Chrome Chrome(57.0.2987.133)https://jsfiddle.net/Legendary/4z8zmd7c/1/示例 – Leguest