让 slider 更改我的 div 的不透明度值时遇到了一些麻烦。这是我一直在使用的 fiddle :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>
最佳答案
您必须使用change
事件。并像这样获取 slider 的值 ($(this).val()
,不作为参数传递。当您完成选择值时,这会更新矩形。
// 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>
对于实时更新,您可以使用input
事件。这会在值更改时更新。
// 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>
关于javascript - 使用 slider 调整 div 的不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30271965/