HTML5输入类型=“范围”图像不透明度

Question

我目前有两个图像和一个输入：

<input type="range" min="0" max="50" value="25">

.image_1 {
  filter: blur(5px);
  opacity: .8;
}

.image_2 {
  filter: blur(5px);
  opacity: .8;
}

目标是滑块向右移动image_2 {filter: blur(0px); opacity: 1; image_2 {filter: blur(0px); opacity: 1; 成为焦点和不透明度充分； 同时image_1 {opacity: 0}消失了。 反之亦然，将滑块向左移动。

任何想法或建议，不胜感激。

到目前为止，感谢您的所有建议和答案。 我还没有提供所提供的解决方案来完全回答我的问题，但是我已经接近了。 我要做的是将oninput=showVal(this.value)到我的input元素中。 然后，我创建了一个函数：

function showVal(newVal) {
   var img_1 = document.getElementById("img_1");
   var img_2 = document.getElementById("img_2");

   // code to change blur upon value of slider changing (img_1.style.etc)
   // unsure how to do
   console.log(newVal);
 }

由于所有的好的答案，我想我已经找到了解决方案。 但是，我仍然在调整不透明度方面遇到问题。 这是当前的公开问题： Google Web Designer在源代码中动态调整不透明度

Answer 1

更新资料

如果您有两个图像，并且想要更改不透明度，则仍然可以侦听change事件。

第一幅图像的不透明度值将是输入范围的值除以其最大值。 第二个图像的不透明度值将是最大值与当前值之差除以最大值。

换句话说，一个图像将变得更加透明，而另一个图像将变得更加不透明。

 var range = document.getElementById("range"); var imgOne = document.getElementsByClassName("img1")[0]; var imgTwo = document.getElementsByClassName("img2")[0]; range.addEventListener("change", function() { imgOne.style.opacity = this.value / this.max; imgTwo.style.opacity = (this.max - this.value) / this.max; }); 

 .img1, .img2 { opacity: 0.5; } 

 <input id="range" type="range" min="0" max="50" value="25"><br><br> <img class="img1" height="200" width="200" src="http://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-11.jpg" /> <img class="img2" height="200" width="200" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLg8Fo8YK5SNLqmZUUCjaUh_2Y57jxBgkmjOwxj7dNSui2jZcb" /> 

Answer 2

做完了 正如您可能已经注意到的那样，仅使用CSS并没有真正的方法。 您还可以将dom中的最大模糊作为另一个函数参数发送，以使代码更具模块化。 另外，别忘了添加所有过滤器实现（由于时间的缘故，我仅添加了webkit）并注意IE10，因为onchange可能会有一些问题。 看到这个答案后退

---

编辑 ：添加了跨浏览器过滤器设置的兼容性

 var config = { img1: document.querySelector('.image_1'), img2: document.querySelector('.image_2'), maxBlurPx: 10 } function getInput(value, max) { var sliderPercentage = (value / max).toFixed(2); config.img1.style.opacity = 1 - sliderPercentage; setBlur(config.img1, (10*sliderPercentage).toFixed(2)); config.img2.style.opacity = sliderPercentage; setBlur(config.img2, 10-(10*sliderPercentage).toFixed(2)); config.img2.style.webkitFilter = "blur(" + (10 - (10 * sliderPercentage).toFixed(1)) + "px)"; } function setBlur(el, value) { if (el.style.hasOwnProperty('filter')) el.style.filter = "blur("+value+"px)"; if (el.style.hasOwnProperty('webkitFilter')) el.style.webkitFilter = "blur("+value+"px)"; if (el.style.hasOwnProperty('mozFilter')) el.style.mozFilter = "blur("+value+"px)"; if (el.style.hasOwnProperty('oFilter')) el.style.oFilter = "blur("+value+"px)"; if (el.style.hasOwnProperty('msFilter')) el.style.msFilter = "blur("+value+"px)"; } 

 .image_1, .image_2 { width: 150px; } .image_1 { filter: blur(5px); opacity: .8; } .image_2 { filter: blur(5px); opacity: .8; } 

 <input type="range" min="0" max="50" value="25" oninput="getInput(this.value, this.max)"> <br /> <img src="http://www.istockphoto.com/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/EssentialBackgrounds79139997.jpg" alt="" class="image_1" /> <img src="http://www.istockphoto.com/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/EssentialBackgrounds79139997.jpg" alt="" class="image_2" /> 

Answer 3

试试这个片段。 我在我的网站http://stark-cove-24150.herokuapp.com上使用了此代码

$(document).ready(function(){
 $("#designer").mouseenter(function(){
     $("#xyz").attr("src", "design.jpg");
     $("#face").css("background-image", "url(des2.jpg)");
     $("#coder").css("opacity", "0.5");
 });
$("#designer").mouseleave(function(){
     $("#xyz").attr("src", "def.jpg");
     $("#coder").css("opacity", "");
 });
 $("#coder").mouseenter(function(){
     $("#xyz").attr("src", "cp2.jpg");
      $("#designer").css("opacity", "0.5");
      $("#face").css("background-image", "url(coding.jpg)");
 });
$("#coder").mouseleave(function(){
     $("#xyz").attr("src", "def.jpg");
     $("#face").css("background-image", "url()");
     $("#designer").css("opacity", "");
 });
 });

Answer 4

您可以创建对象，其中属性，值对应于input元素的当前value

 var imgs = $(".image_1, .image_2"), i = { "0.4": .6, "0.3": .7, "0.2": .8, "0.1": .9, "0": 1, "0.6": .4, "0.7": .3, "0.8": .2, "0.9": .1, "1": 0 }, blur = { "0.5": "5px", "0.6": "4px", "0.7": "3px", "0.8": "2px", "0.9": "1px", "1": "0px", "0.4": "4px", "0.3": "3px", "0.2": "2px", "0.1": "1px", "0": "0px" }; $("input[type=range]").change(function() { var n = this.value; if (n == .5) { imgs.css({ "-webkit-filter": "blur(" + blur[n] + ")", "-moz-filter": "blur(" + blur[n] + ")", "filter": "blur(" + blur[n] + ")" }) }; if (n > .5) { imgs.eq(1).css({ "opacity": n, "-webkit-filter": "blur(" + blur[n] + ")", "-moz-filter": "blur(" + blur[n] + ")", "filter": "blur(" + blur[n] + ")" }); imgs.eq(0).css({ "opacity": i[n] }); } else { if (n < .5) { imgs.eq(1).css({ "opacity": n }); imgs.eq(0).css({ "opacity": i[n], "-webkit-filter": "blur(" + blur[n] + ")", "-moz-filter": "blur(" + blur[n] + ")", "filter": "blur(" + blur[n] + ")" }) } } }).focus() 

 img { transition: all .01s linear; } .image_1 { -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); opacity: .5; } .image_2 { -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); opacity: .5; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="range" step=".1" min="0" max="1" value=".5"> <img src="http://lorempixel.com/100/100/technics" class="image_1" /> <img src="http://lorempixel.com/100/100/nature" class="image_2" /> 

Answer 5

var val=25;
$("input[type='range']").change(function(){
  if($(this).val()>val){
    $(".image_2").css({
      "filter":"blur(0px)",
      "opacity":"1"
    });
    $(".image_1").css({
      "opacity":"0"
    });
  } else {
    $(".image_1").css({
      "filter":"blur(0px)",
      "opacity":"1"
    });
    $(".image_2").css({
      "opacity":"0"
    });
  }
  val=$(this).val();
});

我还没有检查过此代码，所以我不确定这是否可以工作。

Answer 6

这是另一个示例http://codepen.io/mozzi/pen/qNqJXe

<input id="slider" type="range" min="0" max="50" value="25">
<img id="img1" src="http://www.pd4pic.com/images/number-1-red-circle.png" alt="Smiley face" height="200" width="200">
<img id="img2" src="http://images.clipartpanda.com/numbers-clipart-1-10-4cb4KkKgi.png" alt="Smiley face" height="200" width="200">



  $("#img1").fadeTo(0,0.5);
  $("#img2").fadeTo(0,0.5 ) ;

$("#slider").change(function() {
  var rangeVal = $("#slider").val();
  var val1 = (rangeVal/50);
  var val2 = ((50-rangeVal)/50);
  $("#img1").fadeTo(0,val1);
  $("#img2").fadeTo(0,val2 ) ;
});