Question

这是关于我的问题的JSFIDDLE。

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

我看了http://jqueryui.com/demos/slider/这似乎做了我想要的，但我不知道如何获得滑块的X位置，然后将其应用于image1，image2，image3的不透明度，图像4。

滑块为image 2 reaches 0% and image 3 is 100%，因此960px wide，对于滑块上的每个960 / 4 = 240，不透明度需要设置为0-100％。

首先，这在jquery中是否可行？其次，任何人都可以帮助代码或向我展示一些可能有帮助的链接吗？

Answer 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>

JQuery - 可拖动的DIV在图像之间淡入淡出？

1 个答案: