使用滑块来实现div的不透明度 [英] Using a slider for opacity of a div
本文介绍了使用滑块来实现div的不透明度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个滑块改变我的div的不透明度值有点麻烦。以下是我一直在使用的小提琴: https://jsfiddle.net/yfmLk1ad/1/
I'm having a bit of trouble having a slider change the opacity value of my div. Here is a fiddle of what I've been working with: https://jsfiddle.net/yfmLk1ad/1/
$('#bgopacity').on('slide', function(value) {
$('.background-color').css({
opacity: value * '.01'
});
});
.background-color {
width: 500px;
height: 500px;
background: red;
opacity: .5;
}
<div class="background-color"></div>
<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>
推荐答案
您必须使用更改
事件。并且像这个($(this).val()
一样获取滑块的值,而不是作为参数传递。这样在完成选择值时更新矩形。
You have to make use of change
event. And to take the value of the slider like this ($(this).val()
, not passing as parameter. This update the rectangle when you finished to choose the value.
// Opacity Slider
$('#bgopacity').on('change', function (value) {
$('.background-color').css({
opacity: $(this).val() * '.01'
});
});
.background-color {
width: 500px;
height: 500px;
background: red;
opacity: .5;
}
<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>
<div class="background-color"></div>
对于实时更新,您可以使用输入
事件。当值发生变化时会更新。
For real time update you can use input
event. This is updated when the value is changing.
// Opacity Slider
$('#bgopacity').on('input', function (value) {
$('.background-color').css({
opacity: $(this).val() * '.01'
});
});
.background-color {
width: 500px;
height: 500px;
background: red;
opacity: .5;
}
<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>
<div class="background-color"></div>
这篇关于使用滑块来实现div的不透明度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文