如何在半透明背景上创建透明区域（div）？

Question

我想为网页创建一个'放大镜'ui。镜头正下方的页面上的任何内容都应该是可见的，而其他所有内容都应该是半透明的。换句话说，我想创建一个半透明的图层（它阻挡整个页面），里面有一个透明的“洞”（镜头）。我应该可以移动镜头，也可以调整镜头的大小。我想到了一个解决方案，涉及用3x3 div覆盖整个页面，使所有的div都是半透明的，除了中间的div将托管镜头并且将是完全透明的。然后我会处理resize＆amp;在javascript中移动lens-div（以及它周围的其他div）。我正在寻找替代，更简单的解决方案来解决这个问题。

提前致谢！

Answer 1

好问题！考虑这个简化的实现：

var $helperLeft = $('.helper-left'),
    $helperRight = $('.helper-right'),
    $helperTop = $('.helper-top'),
    $helperBottom = $('.helper-bottom'),

$view = $('.view').draggable({
    drag: onDrag
}),
viewWidth = $view.width(),
viewHeight = $view.height();

function onDrag(event, ui) {
    $helperLeft.css({width: ui.position.left});
    $helperRight.css({left: ui.position.left + viewWidth});
    $helperTop.css({
        width: viewWidth,
        left: ui.position.left,
        height: ui.position.top
    });
    $helperBottom.css({
        top: ui.position.top + viewHeight,
        left: ui.position.left,
        width: viewWidth
    });
}

onDrag(null, {position: $view.position()});

就是这样！非常简短。我认为调整大小也很简单。

演示：http://jsfiddle.net/j74A9/