1

画像の不透明度を設定するためにJavaScriptの「スライダー」機能を使用しています。

「value: 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 に答える