Javascript滑块：如何设置页面加载时的默认不透明度
[英]Javascript slider: How to set default opacity on page load
问题描述
I am using a javascript "slider" function to set the opacity of an image. 
我正在使用JavaScript“滑块”功能设置图像的不透明度。
Even though I specify "value: 0.5;" 即使我指定“值：0.5；” all this does is set the slider "bar" position to 0.5 , it doesn't actually change the opacity to 0.5. 所有这些操作都将滑块的“ bar” 位置设置为0.5，实际上并没有将不透明度更改为0.5。
On page load, the default opacity is always 1.0. 在页面加载时，默认不透明度始终为1.0。 I can click on the slider bar (which is in the 0.5 position), and it will apply the 0.5 value, but I want to specify a default value when the page loads (and of course have the slider set to match it). 我可以单击滑块（位于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>
3 个解决方案
解决方案1
1 已采纳 2013-08-27 10:13:50
I would use the jQuery fadeTo method to manipulate the opacity in a browser independent way. 我将使用jQuery fadeTo方法以与浏览器无关的方式操纵不透明度。 See here: jq-fadeto . 看到这里： jq-fadeto 。
Try it first in a JavaScript console directly on the image, like this 像这样直接在图像上的JavaScript控制台中首先尝试
<img id="imageid" src="image.gif">
...
$('#imageid').fadeTo(0, 0.4);
Also check your events, the "slide" is used while sliding, you might use a handler for "change" or other event to get it right. 还要检查您的事件，在滑动时使用“ slide”，您可以对“ change”或其他事件使用处理程序以使其正确。 Look here: jq-slider 看这里： jq-slider
解决方案2
0 2013-08-27 10:19:29
Remove opacity in 去除不透明
#box {position:absolute; top:40px; left:0px; z-index:-1; opacity:0.5;}
from your style and then try it 从你的风格，然后尝试
解决方案3
0 2013-08-27 10:22:53
您可以在滑块初始化$（“ #slider”）.slider（“ option”，“ value”，0.7）之后尝试；
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.