![](/img/trans.png)
[英]Why does this javascript code to increase font size work in Firefox but not in Chrome?
[英]Why does this JavaScript css filter code work in Firefox but not in Chrome?
过滤器在Firefox(43.0.1)中协同工作,但在Chrome(57.0.2987.133)中不起作用。 在Chrome浏览器中,当我将鼠标移到另一个滑块上时,上一个滑块的调整将被删除。 关于图像过滤器,存在类似的问题,但确实适用于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>
经过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;" />
Contrast: <input type="range" name="contrast" min="0" max="200" step="5" onmousemove="apply()" style="vertical-align:-7px;"/>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.