Question

我有4张图片和一张滑块：

[image1.jpg]----[image2.jpg]----[image3.jpg]----[image4.jpg]
-----------------------------[Slider]-----------------------

是否可以单击并拖动滑块，以便在位置1和2之间时，图像1和2设置为50％透明度，然后当滑块到达位置2时，图像2是100％不透明的图像1是100％透明的。然后当从位置2滑动到3时，图像2变为90％，图像3变为10％，下一个位置图像2 80％图像3 20％等...直到滑块位于位置3并且图像3完全可见并且图像2是100％透明。

这可能吗？我会使用数组，还是获取滑块的X位置并相应调整图像透明度？

Answer 1

这是我的尝试：little link。它使用jQuery但没有插件（我相信它也可以使用普通的JavaScript编写）。

代码非常自我解释，但这里是JavaScript部分的注释版本：

$(".slider").scroll(function() {
   var imgs = $(".slider img"); //find all images in the slider
    imgs.each(function() { //for each of them
        var cur = $(this); //save the current image in cur
        var lft = cur.offset().left; //find out its left offset
        if(lft <= 0) { //if it's been scrolled past (its offset is negative)
            cur.css({opacity: Math.max(0, (300 + lft) / 300)}); //then set its opacity to a value proportional to its left offset
        }
        else {
            cur.css({opacity: Math.min(1, (500 - lft) / 500)}); //it's not scrolled past yet; set its opacity appropriately
        }
    });
});

我希望有所帮助！

Answer 2

查看jQuery UI slider，它有很多功能，包括滑动（divs with）图像

Answer 3

使用UI滑块绝对可以100％实现。我会看一下jQuery的UI滑块。以下是他们如何使用它来不断更改颜色的示例：

Slider Demo

虽然不同，但总体思路是一样的 - 当滑块的值发生变化时，您只需根据图像的不透明度进行调整即可。我认为你拥有的后一种想法（＆＃34;获得滑块的X位置并相应地调整图像透明度？＆＃34;）是解决问题的一种非常好的方法。你可以设置它，使0对于image1是100％可见，25对于image2是100％可见，依此类推。如果你需要更多的帮助braintstorming，请告诉我们：]

是否可以使用拖动滑块在jquery中的4个图像之间滑动？

3 个答案: