我正在使用javascript“slider”功能来设置图像的不透明度。
即使我指定“值：0.5;”所有这一切都将滑块“bar”位置设置为0.5，实际上将更改不透明度设置为0.5。
在页面加载时，默认不透明度始终为1.0。我可以单击滑块（位于0.5位置），它将应用0.5值，但我想在页面加载时指定默认值（当然还要设置滑块以匹配它）。
<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>
答案 0 :(得分：1)
我会使用jQuery fadeTo方法以独立于浏览器的方式操作不透明度。 见这里：jq-fadeto。
首先在JavaScript控制台中直接在图像上试用，例如
<img id="imageid" src="image.gif">
...
$('#imageid').fadeTo(0, 0.4);
同时检查您的事件，滑动时使用“幻灯片”，您可以使用“更改”处理程序或其他事件来使其正确。看这里：jq-slider
答案 1 :(得分：0)
删除
中的不透明度 #box {position:absolute; top:40px; left:0px; z-index:-1; opacity:0.5;}
从你的风格然后尝试
答案 2 :(得分：0)
你可以尝试滑块初始化$（“＃slider”）。slider（“option”，“value”，0.7）;