Question

我对网络开发比较陌生，甚至不知道从哪里开始编写一个javascript，将鼠标悬停时的灰度缩略图图像淡化为彩色缩略图图像，反之亦然（＆lt; - 或者其他）这就是所谓的）。

我看了一遍，找不到执行此操作的脚本。这可能吗？我可以使用jquery来做这个吗？其他想法？

非常感谢您提供所有帮助！

Answer 1

我认为你所能做的就是一次将两个缩略图加载到一个容器中，黑色和白色覆盖在颜色的顶部。然后，您可以使用jquery将缩略图的不透明度淡化为0.0。这是一个工作示例（它只是使用一次单击来更改它，但我会将鼠标悬停/鼠标移开给你 - 你可能想要加快动画效果）：

一些html：

<div class="container">
  <img src="blackandwhite.jpg" class="bw" />
  <img src="colour.jpg" class="colour" />
</div>

一些css：

.container { position: relative; }
.container img { position: absolute; }
.bw { z-index: 101; }
.colour { z-index: 100; }

一些jquery：

$(function() {
    $(".bw").click(function() {
        $(this).animate({ opacity: 0.0 }, 800);
    });
});

Answer 2

最好的方法是实际拥有两个版本的图像。一个是灰度，一个是颜色。为了严格保持javascript和html，我不相信除了两种图像方法之外还有其他任何方式。 Flash，Silverlight甚至HTML 5都可以轻松实现。

Answer 3

你真的想要褪色，还是只是为了交换？

通常，交换是通过CSS

完成的

<a class="btn"></a>

和CSS

a.btn {
    background: url(../images/button-image.png) no-repeat 0 0;
    width: 110px;
    height: 16px;
    margin: 10px 0 0;
}
a.btn:hover {
    background-position: 0 -16px;
}

在这种情况下，按钮图像包含垂直堆叠的两个图像，并且css正在滑动背景图像，但是它的想法是相同的。这是一个性能增强，因为浏览器只需要下载1个图像，而不是2个。

使用javascript将缩略图图像从灰度渐变为彩色

3 个答案: