Javascript 在鼠标轨迹中显示图像

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

---

我不想用闪光灯。您知道如何在HTML5或Javascript中实现这一点吗？

您可能想看看jQueryUI的插件。 基本上，您可以有两个图像可以拖动，并且可以彼此拖放，一旦发生这种情况，第三个图像可以变为可见

---

下面是一个示例

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

将黑白图像加载到隐藏的IMG标记中

加载IMG时，使用drawImage（）将其内容绘制到画布对象中。（画布绝对位于带有彩色图像的IMG顶部）

编写javascript，通过鼠标拖动擦除画布上的像素（即将其字母设置为零）

---

注意：IE8或更早版本本机不支持canvas对象：

我想我可能完全误解了你的问题，所以我用我认为你的意思创建了一个新的答案。如果您只想将黑白图像隐藏在鼠标上方，那么可以使用jquery执行类似的操作

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

---

彩色图像可以有一个样式：“display:none；”开始，并使用CSS放置在黑白图像后面。一旦你将鼠标悬停在黑白图像上，它将淡出，彩色图像将淡入。

@sgonzalez我不会这么说。IE6可以很好地运行（一些）JS，但绝对不支持任何HTML5的东西。谢天谢地，IE6正在慢慢消失。HTML5比Javascript更重要的是什么？一些新的元素？照顾画布、音频、文件、拖放等都是JS。（这都是IE无法理解的JS。）@Rudie请告诉我HTML5与Javascript有什么关系？HTML5可能会被用作一个时髦词，包括许多CSS和JS功能。然而，根据定义，HTML5是一种标记语言，当然不是javascript。请参阅：HTML5当然包括JS。你把文件API称为什么？它不在V8中，需要一个DOM。。。我不认为CSS是HTML的一部分。但这不是重点。所有HTML5都是一些无用的元素。我不玩了。嗨，听起来很完美。我不是一个javascript程序员，如果你有机会的话，我会非常感谢你的代码使这项工作。。。我可以管理css没有任何问题。我无法理解的是画布和擦除像素！！非常感谢。