我想为网页创建一个“放大镜”用户界面。镜头正下方页面上的所有内容均应可见，而其他所有内容均应设为半透明。换句话说，我想创建一个半透明的图层（该图层将整个页面挡住），并在其中包含一个透明的“孔”（透镜）。我应该可以移动镜头，也可以调整镜头的大小。我想到了一种解决方案，该方案涉及用3x3的div覆盖整个页面，使所有div都是半透明的，除了中间的那一个将承载镜头并完全透明。然后，我将在javascript中处理lens-div（及其周围的其他div）的大小和移动。我正在寻找替代的，更简单的解决方案来解决此问题。
提前致谢！
好问题！考虑以下简化的实现：
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()});
而已！非常简短。我认为调整大小也很简单。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句