Javascript 有洞的高效HTML Div

让我再解释一点，我正试图有一个大面积（全屏）和一个固定大小的洞在它。这个洞将跟随鼠标在屏幕上移动。想象一下，将一个作用域集中在页面上，页面的其余部分变灰

我需要这在所有浏览器（包括IE 6）有效地工作

我当前的解决方案使用4个div（上、右、下、左）并以这种方式形成孔。然而，这需要重新绘制整个屏幕，并显示工件（div有背景图像以灰显该区域）

是否有更好（更有效）的方法来实现这一点，任何人都可能会遇到

---

注意：孔必须将所有事件传递到这些div下面的元素。

您可能需要使用

画布

标记，它可以使用excanvas在IE上工作，然后将文本放在画布标记内。它可以对事件做出反应，因为它基本上是一个html元素。

我建议使用一个部分不透明的div。它有透明的背景，但有黑色的边框。当鼠标移动时，调整边框的厚度。因为它是部分不透明的（比如说50%），被边框覆盖的部分看起来会变灰。请记住，边框可以任意粗细，甚至可以是数百像素。这样，您根本不需要使用图像，也不需要修改DOM，只需更改单个div的样式属性即可

---

编辑：刚刚注意到允许鼠标事件通过的要求。我相信单div解决方案在这里失败了。需要使用四个div的解决方案。但是，这仍然可以通过使用黑色、半透明的div（而不是背景图像）来实现。然后可以调整它们的大小（通过动态更改

样式

对象），而不是删除和重新创建（不确定这是否是OP所说的“重新绘制”的意思）。

不幸的是，DOM的设计不允许事件“通过”一个块到它下面的任何对象。这就是为什么允许拖放的工具包（mootools、jquery等）如此复杂的原因。它们预先计算所有“可拖放”元素的位置，并对与onmousemove事件关联的拖动对象与可拖放对象的坐标进行大量比较。这是一种绕过限制的方法，你可以探索。找出您想要对“窗口”做出反应的元素，并进行坐标比较，等等

我见过一些局部解决方案，包括将拖动的元素从鼠标指针上偏移，这样指针就可以“清除”，并且可以正确地触发事件，但这很可能会破坏您想要的窗口效果

最有可能的是你被困在那四个沙发上。他们必须有背景图像吗？你不是候选人吗

有一个div，其宽度是视口的两倍，高度是视口的两倍

在里面，把你的四个div在中间创建固定宽度的孔。

在javascript中，使用光标移动外部div，而不是调整四个div的大小

结论：

• 拥有4个div并调整其大小似乎是最快的方法
• 移动4个div速度慢4倍
• 移动1个容器分区和4个内部分区一样慢（比调整大小慢4倍）
• 使用背景图像是IE支持的唯一选项（因为不透明度过滤器（alpha）对于整个页面大小div来说太慢）
• 背景图像必须为纯色（即1px纯色，半不透明）。尝试获得纯色/半透明颜色以实现模糊将导致屏幕重绘瑕疵（即使在不调整大小/移动时）div

---

。。。样本站点？你是什么意思，一个洞的图片？这个洞必须让点击通过吗？你想用这个洞实现什么？我怀疑另一种方法会更有效率。i、 e.在一个较大的div上放置一个div，并使其顶部看起来像一个洞……是的，这个洞必须让所有事件通过，我基本上使整个html页面变灰，除了鼠标光标周围的区域。下面的页面应该表现得像没有div一样（因此所有事件都必须工作）。@gatapia:你对可用性的想法太可怕了！如果4个div表现不好，canvas（特别是使用excanvas）将表现糟糕canvas能否表现良好，取决于你如何处理，因为你只是在重新绘制一个很小的区域。诀窍是利用层或z索引。从字里行间看，我猜他有一个html页面，他想把它放在洞后面。浏览器免费提供给你的正常鼠标悬停行为——比如：悬停和更改光标图标等，以及点击链接等，我相信这就是他想要的。canvas方法不会给你这些东西，除非你想在canvas中从头开始重建所有的web元素。谢谢你澄清这不符合事件必须通过“洞”的要求。这是一个好主意，为事件感到羞耻，但我真的很喜欢“跳出框框思考”。半透明div的问题在于它提供了纯色。我正在寻找一个模糊效果，我可以实现一个4px图像与不透明和半透明像素的混合。半透明在IE中的表现也很差，因为必须使用过滤器。您好，CSS不透明度很好，但是这意味着在IE中使用过滤器，这太慢了。不透明度的另一个问题是，它会给你一个纯色，就像bg图像一样，我正在寻找一个很好的模糊效果（100%不透明的像素和50%不透明的像素）。嗨，尼克，我现在将尝试这样的方法，使用4个超大的div并移动它们。将向您反馈此操作的执行情况（如果移动大div比调整小div效果更好，则将标记为接受）。好的，结果是移动4个div或1个容器div比仅调整4个边框样式div慢4倍（原始解决方案）。会吗