HTML5输入类型=＆＃34;范围＆＃34;图像不透明度

时间：2016-06-23 02:27:56

标签： javascript jquery css html5 input

我目前有两张图片和一张输入：

<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_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 dynamically adjust opacity in source code

6 个答案:

答案 0 :(得分：4)

<强>更新

如果您有两张图片，并且想要更改不透明度，您仍然可以收听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" />

答案 1 :(得分：4)

完成。你可能已经注意到，没有真正的方法只使用CSS。您还可以从dom发送最大模糊作为另一个函数参数，以使代码更加模块化。另外，不要忘记添加所有过滤器实现（我只是因为时间而添加了webkit）并注意IE10，因为onchange可能会有一些问题。见this answer for a fallback

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

＆＃13;
＆＃13; 
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)";
}
＆＃13; 
.image_1,
.image_2 {
  width: 150px;
}
.image_1 {
  filter: blur(5px);
  opacity: .8;
}
.image_2 {
  filter: blur(5px);
  opacity: .8;
}
＆＃13; 
<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" />
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：2)

试试这个代码段。我在我的网站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", "");
 });
 });

答案 3 :(得分：2)

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

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" />

答案 4 :(得分：1)

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();
});

我还没有检查过这段代码，所以我不确定这是否有用..

答案 5 :(得分：1)

这是另一个例子 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 ) ;
});
相关问题
最新问题