0

这是关于我的问题的JSFIDDLE 。

我想左右拖动滑块（上面有对话气泡）。当它在它后面的栏上的蓝色和绿色之间滑动时，它会设置不透明度image 1 to 90%和不透明度等image 2 to 10%，image1 80% image 2 20%, image 1 70% - image2 30%直到滑块到达绿色和的末端opacity，image 1 is set to 0% and image 2 to 100%然后随着滑块不断向右滑动from green to red，，image 2 reaches 0% and image 3 is 100%。重复下一张图片。

我查看了http://jqueryui.com/demos/slider/似乎可以满足我的要求，但是我不确定如何获取滑块的 X 位置，然后将其应用于 image1 的不透明度，图像2，图像3，图像4。

滑块是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 回答