1

我有两张图片，一张是黑白的，另一张是彩色的。我想要做的是让用户将鼠标拖到顶部的黑白图像上，以便它显示下面的彩色版本。

我不想使用 Flash。有什么想法可以在 HTML 5 或 Javascript 中完成吗？

4

3 回答 3

2

我还没有尝试过，但它应该可以工作：

  1. 在隐藏的 IMG 标签中加载黑白图像
  2. IMG 的 onLoad，使用 drawImage() 将其内容绘制到 CANVAS 对象中。（画布绝对位于带有彩色图像的 IMG 顶部）
  3. 编写 javascript 在鼠标拖动时从画布上擦除像素（即将它们的 alphas 设置为零）

注意： IE8 或更早版本不原生支持画布对象：http ://en.wikipedia.org/wiki/Canvas_element#Support

于 2012-05-30T21:24:51.433 回答
1

您可能想查看 JQuery UI 的Droppable插件。基本上，您可以让 2 张图像可以相互拖动和放置，一旦发生这种情况，第三张图像就会变得可见。

这是一个JSFiddle示例

于 2012-05-30T21:17:42.240 回答
0

我想我可能完全误读了你的问题，所以我用我认为你的意思创建了一个新的答案。如果你想要的只是在鼠标悬停时隐藏黑白图像，你可以用 jquery 做这样的事情。

$('.BandWImage').hover(function(){
    $(this).fadeOut(100);
    $('.ColorImage').fadeIn(500);
});

colorImage 的样式可以是：“display:none;” 开始，并使用 CSS 放置在黑白图像的后面。将鼠标悬停在黑白图像上后，它将淡出，而彩色图像将淡入。

于 2012-05-30T21:34:54.803 回答