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

【问题标题】：JQuery - draggable DIV to fade between images?JQuery - 可拖动的 DIV 在图像之间淡入淡出？
【发布时间】：2012-10-05 13:01:03
【问题描述】：

这是关于我的问题的JSFIDDLE。

我想左右拖动滑块（上面有对话气泡）。当它在其后面的栏上的蓝色和绿色之间滑动时，它将设置image 1 to 90% 的不透明度和image 2 to 10%、image1 80% image 2 20%, image 1 70% - image2 30% 等的不透明度，直到滑块到达绿色末端和@ 的opacity 987654327@，然后随着滑块不断向右滑动，from green to red，image 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 中可行吗？其次，任何人都可以提供代码或显示一些可能有帮助的链接吗？

【问题讨论】：

我看不到示例中的图像：/
是的，我使用了相同的滑块。我可以给你有用的提示！
图片是重叠在一起的跨度>

标签： javascript jquery html css slider

【解决方案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>

【讨论】：

嗨 MJQ，感谢这个例子，但这仅适用于 2 张图像。我不确定如何将其扩展为 4 张图片？
可以扩展。只需创建一个逻辑并在更改属性时添加它。这取决于你！
嗨 MJQ，我对 javascript/jquery 还是很陌生。你能告诉我“制定逻辑”是什么意思吗？？？
您必须根据要添加的图像数量设置不透明度。只需了解我共享的代码，然后对其进行增强。太简单了！
嗨 MJQ。您的代码不起作用。我试过把它放在jsfiddle中，它不起作用。