带有漏洞的高效HTML Div

Question

让我再解释一下，我想要一个大面积（全屏），其中有一个固定大小的洞。孔将跟随屏幕周围的鼠标。考虑将范围集中在页面上，页面的其余部分显示为灰色。

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

我目前的解决方案使用4个div（顶部，右侧，底部，左侧）并以此方式形成孔。然而，这需要重新绘制整个屏幕并显示伪影（div具有背景图像以使该区域变灰）。

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

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

Answer 1

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

编辑：刚刚注意到要让鼠标事件通过的要求。我相信单一div解决方案在这里失败了。需要使用四格解决方案。但是，这仍然可以通过使用黑色，半透明的div（而不是背景图像）来完成。然后可以调整它们的大小（通过动态更改style对象），而不是删除和重新创建（不确定这是OP通过“重新绘制”的意思）。

Answer 2

1. 有一个div是视口的两倍宽，两倍高。
2. 在里面，把你的四个div放在中间创建一个固定宽度的洞。
3. 在你的javascript中，让外部 div随光标移动，而不是调整四个div的大小。

Answer 3

结论：

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

Answer 4

您可能希望使用canvas标记，该标记可以使用excanvas http://excanvas.sourceforge.net/在IE上工作，然后您可以将文本放在canvas标记内。它可以对事件做出反应，因为它基本上是一个html元素。

Answer 5

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

我见过部分解决方案涉及从鼠标指针偏移拖动的元素，以便指针“清除”并可以正确触发事件，但这很可能会破坏你想要的窗口效果。

大多数人都喜欢拖着这4个div。他们必须有背景图像吗？ CSS不透明度不是候选人？