3

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

很难解释，但这里有几个例子

这个图片：在此处输入图像描述

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

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

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

4

3 回答 3

2

一种可能的解决方案是为每个子图像创建自定义 SVG 覆盖。发生onmouseover事件时，您会降低 SVG 元素的不透明度，使下面的图像更加可见。

签出这个用于创建 SVG 的工具。

于 2012-08-06T20:03:55.590 回答
1 
$("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/

于 2012-08-06T20:00:33.623 回答
0

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

于 2012-09-25T18:57:37.463 回答