我正在使用 javascript“ slider ”函数来设置图像的不透明度。
即使我指定“值:0.5；”所有这一切只是将 slider “bar”position 设置为 0.5，它实际上并没有将不透明度更改为 0.5。
在页面加载时，默认的不透明度始终为 1.0。我可以单击 slider (位于 0.5 位置)，它会应用 0.5 值，但我想在页面加载时指定一个默认值(当然还有 slider 设置以匹配它)。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').slider({
min: 0,
max: 1,
step: 0.01,
value: 0.5,
orientation: "horizontal",
slide: function(e,ui){
$('#box').css('opacity', ui.value)
}
})
});
</script>
<style type="text/css">
#slider { width: 100px;}
#box {position:absolute; top:40px; left:0px; z-index:-1; opacity:0.5;}
</style>
</head>
<body>
<p><div id="slider"></div>
<div id="box">
<img src="image.gif">
</div>
</body>
</html>
最佳答案
我会使用 jQuery fadeTo 方法以独立于浏览器的方式操纵不透明度。 看这里:jq-fadeto .
首先在 JavaScript 控制台中直接在图像上尝试，就像这样
<img id="imageid" src="image.gif">
...
$('#imageid').fadeTo(0, 0.4);
同时检查您的事件，滑动时使用了“slide”，您可以使用“change”或其他事件的处理程序来使其正确。看这里:jq-slider
关于Javascript slider : How to set default opacity on page load，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18462495/