这里是我的图像和范围元素。当一个文件图像被选中时,它将被显示,然后我想通过范围值来改变它的亮度。但它不会对价值变化做出反应。我尝试记录CSS过滤器属性,它总是返回none
<body>
<input type="range" id="myRange" value="100" max="200" min="0">
<input type="file" id="myImg">
<br>
<img src="#" id="image">
<div id="demo">1</div>
<script type="text/javascript">
$("#myRange").change(function(){
var brightness=$(this).val();
$("#demo").html(brightness+"%");
console.log(brightness);
$("#image").css("filter","brightness("+brightness+"%)");
console.log($("#image").css("filter"));
});
$("#myImg").change(function(){
if (this.files && this.files[0]){
var reader=new FileReader();
reader.onload=function(e){
$("#image").attr("src",e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
</script>
</body>
jQuery已经包含在内请帮帮我。谢谢大家
似乎在我的笔这里工作得很好
下面的代码段也工作得很好。我会首先尝试重新定位你的<script>
到头部,如果没有,你可以尝试包括一个外部JS文件。
$("#myRange").change(function() {
var brightness = $(this).val();
$("#demo").html(brightness + "%");
console.log(brightness);
$("#image").css("filter", "brightness(" + brightness + "%)");
console.log($("#image").css("filter"));
});
$("#myImg").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$("#image").attr("src", e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input type="range" id="myRange" value="100" max="200" min="0">
<input type="file" id="myImg">
<br>
<img src="#" id="image">
<div id="demo">1</div>
</body>
我自己设法找到了解决办法。我需要的是
$("#image").css({
"filter":"brightness("+brightness+"%)",
"webkitFilter":"brightness("+brightness+"%)",
"mozFilter":"brightness("+brightness+"%)",
"oFilter":"brightness("+brightness+"%)",
"msFilter":"brightness("+brightness+"%)"
});