鼠标在多个透明图像堆叠

Question

我不确定这是否可能，但我正在尝试创建一种效果，当您将鼠标悬停在图像上时，这些图像会创建多个彼此重叠的图像（图像将设置为具有一些不透明度），我显示图像的那一部分比另一部分更清晰。

很难解释，但这里有一些例子

此图片：

是创建所有重叠的图像（每个图像都在前一个图像的顶部）

当我将鼠标悬停在最终图像上时，我希望能够“突出显示”与图像本身中图像部分对应的图像部分

我想要做的事情就是用不透明的设置显示主图像，当用户将鼠标悬停在它上面时，抓住坐标，检查所有图像（不能超过25个），看看这些坐标是否是与非“透明”像素匹配并在主要顶部显示此类图像以提供“突出显示”效果，但最终图像大约为400x200，并在显示页面不真实时动态创建所有像素的数组对于每小时/分钟有数千次点击的服务器。将此数组保存在数据库中是不现实的，因为图像的大小可能会根据页面而改变，我们目前有1.3万个最终图像，每个图像平均大约10个分解图像

Answer 1

一种可能的解决方案是为每个子图像创建自定义SVG叠加层。在onmouseover事件后，您将降低SVG元素的不透明度，使下面的图像更加清晰。

用于创建SVG的Checkout this工具。

Answer 2

$("img").css("opacity","0.8");

$("img").mouseover(function()
{
    $(this).css("opacity","1.0");
});

$("img").mouseout(function()
{
    $(this).css("opacity","0.8");
});

有关分割图像的效果，请尝试使用图像映射：

http://www.javascriptkit.com/howto/imagemap.shtml

支持图像映射的不透明度：

http://www.thehelper.net/threads/can-i-use-opacity-on-imagemap.57999/

修改：

要实现悬停效果，请尝试使用Fabric JS将它们加载到画布中，这是一个演示：

http://fabricjs.com/hovering/

Answer 3

放弃了该项目，唯一的解决方案是SVG，但在这个阶段它可能不会因为某些浏览器/操作系统不完全支持它们