按 id 显示元素的滑块不透明度控件

Question

我想使用第二个代码片段中的滑块通过元素 ID 更改不透明度。
在这种情况下，实现滑块的好方法是什么？

<p id="s1">See effect here</p>
<select onchange="myFunction(this);" size="14">
<option>0 <option>0.1 <option>0.2 <option>0.3 <option>0.4
<option>0.5 <option>0.6 <option>0.7 <option>0.8 <option>0.9
<option selected="selected">1
</select>
<script type="text/javascript">
function myFunction(x) {
 // Return text 'See effect here' of the selected option
 var opacity = x.options[x.selectedIndex].text;
 var el = document.getElementById("s1");
  if (el.style.opacity !== undefined) {
  el.style.opacity = opacity;
  } else { alert("Your browser doesn't support this example!"); } }
</script>

<style type="text/css">
.slidecontainer {width: 100%;}
.slider:hover {opacity: 1;}
</style>
<div class="slidecontainer">
<input type="range" min="0" max="10" value="5">
</div>

Answer 1

更好的是滑块。您将很容易获得滑块值。下面是一个示例

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

这工作正常：使用滑块表示div 的不透明度

// Opacity Slider
$('#bgopacity').on('input', function (value) {
    $('#s1').css({
        opacity: $(this).val() * '.01'
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label>Color Opacity</label>
    <input type="range" name="bgopacity" id="bgopacity" value="50" min="0" max="100" step="1" onchange="rangevalue.value=value">
    <output id="rangevalue">50</output>
</form>
<p id="s1">See effect here</p>