在鼠标轨迹中显示图像答案

【问题标题】：Reveal an image in a mouse trail在鼠标轨迹中显示图像
【发布时间】：2012-06-05 03:55:57
【问题描述】：

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

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

【问题讨论】：

@sgonzalez 我不会这么说的。 IE6 可以很好地运行（一些）JS，但绝对不支持任何 HTML5 的东西。
谢天谢地 ie6 正在慢慢消失
HTML5 比 Javascript 更重要的是什么？几个新元素？关心。画布、音频、文件、拖放等都是 JS。（不过都是 IE 看不懂的 JS。）
@Rudie 请告诉我 HTML5 与 Javascript 有什么关系？ HTML5 可能被用作一个流行词来包含许多 CSS 和 JS 特色。但是，根据定义，HTML5 是一种标记语言，当然不是 javascript。见：w3.org/TR/html5
当然 HTML5 包含 JS。你叫什么文件API？它不在 V8 中，它需要一个 DOM……虽然我不认为 CSS 是 HTML 的一部分。不过，这并不是重点。所有的 HTML5 都是一些无用的元素。我不玩了。

【解决方案1】：

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

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

【讨论】：

嗨，这听起来很完美。我不是 javascript 编码器，如果您有机会，我将非常感谢使这项工作的代码......我可以毫无问题地管理 css。画布和擦除像素超出了我的范围！！谢谢。

【解决方案2】：

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

这是一个JSFiddle 示例

【讨论】：

【解决方案3】：

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

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

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

【讨论】：