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

Question

我对网络开发比较陌生,甚至不知道从哪里开始编写一个javascript,将鼠标悬停时的灰度缩略图缩小为彩色缩略图,反之亦然(< - 或者不管叫什么) .

我看了一遍,找不到这样做的脚本.这可能吗？我可以使用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);
    });
});