1

我正在使用 javascript“滑块”函数来设置图像的不透明度。

即使我指定“值：0.5；” 所做的只是将滑块“条”的位置设置为 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>
4

3 回答 3

1

我将使用 jQuery fadeTo 方法以独立于浏览器的方式操作不透明度。见这里：jq-fadeto。

首先在图像上直接在 JavaScript 控制台中尝试，像这样

<img id="imageid" src="image.gif">
...
$('#imageid').fadeTo(0, 0.4);

还要检查您的事件，滑动时使用“滑动”，您可以使用“更改”或其他事件的处理程序来正确处理。看这里：jq-slider

于 2013-08-27T10:13:50.947 回答
0

去除不透明度

 #box {position:absolute; top:40px; left:0px; z-index:-1; opacity:0.5;}

从你的风格，然后尝试它

于 2013-08-27T10:19:29.527 回答
0

您可以在滑块初始化后尝试 $( "#slider" ).slider( "option", "value", 0.7 );

于 2013-08-27T10:22:53.910 回答