0

我有 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 位置并相应地调整图像透明度？

4

3 回答 3

1

这是我的尝试：小链接。它使用 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
        }
    });
});

我希望这有帮助！

于 2012-08-31T09:45:26.657 回答
0

查看jQuery UI 滑块，它有很多功能，包括滑动（带有 div 的）图像

于 2012-08-31T09:14:54.840 回答
0

使用 UI 滑块，这绝对是 100% 可能的。我会看看 jQuery 的 UI 滑块。这是他们如何使用它来不断更改颜色的示例：

滑块演示

虽然不同，但总体思路是相同的——随着滑块值的变化，您只需针对图像的不透明度进行调整。我认为您的后一个想法（“获取滑块的 X 位置并相应地调整图像透明度？”）是解决问题的好方法。您可能可以将其设置为 0 对 image1 100% 可见，25 对 image2 100% 可见，依此类推。如果您需要更多头脑风暴帮助，请告诉我们：]

于 2012-08-31T09:20:38.080 回答