代码之家 › 专栏 › 技术社区 › gatapia

有孔的高效HTML DIV

html javascript

gatapia · 技术社区 · 16 年前

让我再解释一下,我正试图有一个大面积(全屏)与一个固定大小的洞在里面。该孔将跟随鼠标在屏幕周围移动。可以考虑让一个范围集中在页面上,页面的其余部分变灰。

我需要在所有浏览器(包括IE 6)中高效地工作。

我当前的解决方案使用4个div(顶部、右侧、底部、左侧)并以此方式形成孔。但是,这需要重新绘制整个屏幕,这会显示工件(div具有背景图像以使区域变灰)。

是否有更好(更有效)的方法来实现这一点,任何人都可能遇到过?

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

5 回复 | 直到 11 年前

levik 16 年前

我建议使用一个部分不透明的分区。它有透明的背景,但有黑色的边框。当鼠标移动时,调整边框的厚度。因为它是部分不透明的(比如说50%),所以被边界覆盖的部分会变成灰色。记住,边框可以像你想要的那样厚,甚至可以有几百个像素。这样就不需要使用图像,也不需要修改DOM——只需更改单个DIV的样式属性。

编辑: 刚刚注意到让鼠标事件通过的要求。我相信单一的DIV解决方案在这里失败了。需要使用四个DIV解决方案。但是,这仍然可以通过使用黑色、半不透明的分割(而不是背景图像)来实现。然后可以调整它们的大小(通过动态更改 style 对象),而不是删除和重新创建(不确定这是否是OP所指的“重新绘制”)。

nickf 16 年前

有一个比视区宽两倍高两倍的分区。
在里面,把你的四个div创建固定宽度的洞在中间。
在您的javascript中,使 外面的 DIV使用光标移动,而不是调整四个DIV的大小。

Brian Webster Jason 13 年前

结论:

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

James Black 16 年前

您可能需要使用 canvas 标签,可以在IE上使用excanvas, http://excanvas.sourceforge.net/ 然后将文本放入画布标记中。基本上,它可以对事件作出反应,因为它是一个HTML元素。

Marc B 16 年前

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

我已经看到了部分解决方案,其中包括从鼠标指针偏移拖动的元素,以便指针“清除”,并可以正确触发事件,但这很可能会破坏您要使用的窗口效果。

最有可能的是你在这4个沙发上拖来拖去。他们必须有背景图像吗?CSS不透明度不是候选?