[英]Use Slider to Change Image CSS Filter with Javascript
我正在尝试通过使用滑块输入来更改png上的css过滤器(准确地说是色调旋转)。 我不断收到“ -webkit-filter:hue-rotate( undefined deg)”
谢谢你的帮助!
这是我的代码:
function hueFunction(hueVal) { var setAs = hueVal + "deg" document.getElementById("lgImage").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")") }
<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.hueVal)"> <br/> <img src="https://campstoregear.com/wp-content/uploads/2017/09/summer-camp-2018-apparel-design-CD1816-Primary.png" id="lgImage">
将oninput="hueFunction(this.hueVal)"
更改为oninput="hueFunction(this.value)"
function hueFunction(hueVal) { var setAs = hueVal + "deg" document.getElementById("lgImage").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")") }
<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.value)"> <br/> <img src="https://campstoregear.com/wp-content/uploads/2017/09/summer-camp-2018-apparel-design-CD1816-Primary.png" id="lgImage">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.