Javascript滑塊：如何設置頁面加載時的默認不透明度

Question

我正在使用JavaScript“滑塊”功能設置圖像的不透明度。

即使我指定“值：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>

Answer 1

我將使用jQuery fadeTo方法以與瀏覽器無關的方式操縱不透明度。 看到這里： jq-fadeto 。

像這樣直接在圖像上的JavaScript控制台中首先嘗試

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

還要檢查您的事件，在滑動時使用“ slide”，您可以對“ change”或其他事件使用處理程序以使其正確。 看這里： jq-slider

Answer 2

去除不透明

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

從你的風格，然后嘗試

Answer 3

您可以在滑塊初始化$（“ #slider”）.slider（“ option”，“ value”，0.7）之后嘗試；

Javascript滑塊：如何設置頁面加載時的默認不透明度

問題描述

3 個解決方案

解決方案1
1 已采納 2013-08-27 10:13:50

解決方案2
0 2013-08-27 10:19:29

解決方案3
0 2013-08-27 10:22:53

Javascript滑塊：如何設置頁面加載時的默認不透明度

問題描述

3 個解決方案

解決方案1 1 已采納 2013-08-27 10:13:50

解決方案2 0 2013-08-27 10:19:29

解決方案3 0 2013-08-27 10:22:53

解決方案1
1 已采納 2013-08-27 10:13:50

解決方案2
0 2013-08-27 10:19:29

解決方案3
0 2013-08-27 10:22:53