这是一个JSFIDDLE关于我的问题。
我想左右拖动 slider (上面有气泡)。当它在它后面的栏上的蓝色和绿色之间滑动时，它将 image 1 的不透明度设置为 90% 并将 image 2 的不透明度设置为 10%， image1 80% image 2 20%, image 1 70% - image2 30% 等等，直到 slider 到达绿色的末端并且image 1 的，然后随着 slider 不断向右滑动，opacity 设置为0% 和图像 2 到 100%从绿色到红色，图像 2 达到 0%，图像 3 为 100%。重复下一张图片。
我看过http://jqueryui.com/demos/slider/这似乎符合我的要求，但我不确定如何获取 slider 的 X 位置，然后将其应用于 image1、image2、image3、image4 的不透明度。
slider 的宽度为 960px，因此 960/4 = 240，对于沿 slider 的每个 240 像素，需要设置不透明度从 0-100%。
首先，这在 jquery 中可行吗？其次，任何人都可以帮助编写代码或向我展示一些可能有帮助的链接吗？
最佳答案
<!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>
关于javascript - JQuery - 可拖动的 DIV 在图像之间淡入淡出？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12746817/