在鼠标轨迹中显示图像

Question

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

我不想使用Flash。任何想法如何在HTML 5或Javascript中完成？

Answer 1

我没试过这个，但它应该有效：

1. 将B＆amp; W图像加载到隐藏的IMG标记
中
2. onLoad of IMG，使用drawImage（）将其内容绘制到CANVAS对象中。 （画布绝对位于带有彩色图像的IMG顶部）
3. 编写javascript，在鼠标拖动时擦除画布上的像素（即将其alpha设置为零）

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

Answer 2

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

继承人JSFiddle示例

Answer 3

我想我可能完全误读了你的问题，所以我用我认为你的意思创造了一个新答案。如果你想要的只是鼠标悬停在b＆amp; w图像上，你可以用jquery做这样的事情。

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

colorImage可以具有以下样式：＆＃34; display：none;＆＃34;开始，并使用CSS放在黑白图像后面。将鼠标悬停在黑白图像上后，它会淡出，彩色图像会淡入。