0

これが私の問題についてのJSFIDDLEです。

スライダー（吹き出しが上にある）を左右にドラッグしたい。後ろのバーの青と緑の色の間をスライドすると、スライダーが緑との端に達するまでの不透明度と不透明度などがimage 1 to 90%設定されimage 2 to 10%、スライダーが右にスライドし続けると、、。次の画像で繰り返します。image1 80% image 2 20%, image 1 70% - image2 30%opacityimage 1 is set to 0% and image 2 to 100%from green to redimage 2 reaches 0% and image 3 is 100%

http://jqueryui.com/demos/slider/を見ましたが、これは私が望むことを実行しているようですが、スライダーのX位置を取得し、それをimage1の不透明度に適用する方法がわかりません。 image2、image3、image4。

スライダーは960px wideなので960 / 4 = 240、240 pixelsスライダーに沿って不透明度を0〜100％に設定する必要があります。

まず、これはjqueryで可能ですか？第二に、誰かがコードを手伝ったり、役立つかもしれないいくつかのリンクを見せてくれますか？

4

1 に答える 1

1 
<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Slider</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        $( "#slider" ).slider({

        range: "min",
                 value: 0,
                 min: 0,
                 max: 10,

                 slide: function (event, ui) {
                     var r = (ui.value); 
                     $("#img1").css({'opacity':r/10});
                     $("#img2").css({'opacity':1-(r/10)});
}   
    })
    });
    </script>
</head>
<body>
<img id = "img1" src = "http://www.gettyimages.com/images/marketing/frontdoorStill/PanoramicImagesRM/FD_image.jpg" style = "height:200px; width:200px">
<img id = "img2" src = "http://www.gettyimages.com/images/marketing/frontdoorStill/PanoramicImagesRM/FD_image.jpg" style = "height:200px; width:200px">
<div id="slider" style = "height:10px; width:400px" ></div>
</body>
</html>
于 2012-10-05T13:21:36.413 に答える