Question

我的图像内嵌不透明度设置如此......

<img id="theImage" style="opacity: 0.54;" src="...source..." class="gray-scale-img profileImage img-responsive"/>

我正在使用IonRangeSlider来设置不透明度的新值，但问题是如果我在我的范围滑块上超过0.54，则不透明度不起作用。它将从0.00调整到0.54，但如果我超过这个，它只保持在0.54并且不会变得更亮。

$("#theImage").css({ opacity: opacity });

IonRangeSlider

$("#formElement").ionRangeSlider({
  min: 0,
  max: 100,
  onChange: function(data) {
    var val = data.from;
    if (val < 100) {
      if (val < 10) {
        var opacity = "0.0" + val;
      } else {
        var opacity = "0." + val;
      }
    } else {
      var opacity = "1.0"
    }
    $("#theImage").css({
      opacity: opacity
    });
  },
  onFinish: function() {
    ...
  }
});

感谢。

Answer 1

为什么使用if else

直接确定不透明度opacity = val/100

编辑：请参阅下面的代码，了解您的想法。您也可以查看@gyre的答案，该答案与IonRangeSlider具有类似的实现方式，因此我会让这段代码更加通用。

＆＃13;

$(function(){
      var slider = $("#slider");
      var img = $("#theImage");
  
  slider.change(function(){
      var opacity = (this.value)/100;
      img.css("opacity",opacity);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id="slider" type="range" id="myRange" value="54"><br>
<img id="theImage" style="opacity: 0.54;" src="https://placehold.it/350x150">
</div>

＆＃13;

Answer 2

您正在使用opacity变量进行太多不必要的计算和分支。看起来你试图将百分比变成小数。只需使用data.from / 100作为不透明度值。

＆＃13;

$("#formElement").ionRangeSlider({
  min: 0,
  from: 54,
  max: 100,
  onChange: function (data) {
    $("#theImage").css('opacity', data.from / 100);
  },
  onFinish: function() {
    // stuff
  }
});

＆＃13;

<input id="formElement" type="text" >
<img id="theImage" src="//stackoverflow.com/favicon.ico">

<!-- Resources necessary for the demo to work -->
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinFlat.css" rel="stylesheet"/>
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/IonDen/ion.rangeSlider/master/js/ion.rangeSlider.min.js"></script>

＆＃13;

编辑：根据文档，您可以使用from属性配置滑块以设置默认位置。感谢zer00ne首先在his answer中使用此概念。

jQuery覆盖不透明度为

2 个答案: