使用Jquery基于页面上光标位置的屏幕遮罩

Question

我试图在屏幕上添加一个覆盖层，然后根据光标在文档窗口中的位置，将有一个透明区域，您可以在其中看到下面的网站，但其他所有内容都被掩盖了。

我意识到我必须2个div来做这个。 1 div代表屏幕的上半部分，然后一个div代表屏幕的下半部分。

如您在图像中看到的，蓝色区域是顶部和底部的div，它们遮盖了网站，中间留有空隙，可以看到下面的网站。

我试图让2个div根据屏幕上的光标位置更改其高度，以便可以在屏幕上上下移动查看窗格。

我试图加入pageY事件并像这样更改顶部div的高度：

$( document ).mousemove(function( event ) { 
        var h = event.pageY;
        $('#topDiv').css({"height":h}); 


    });

这种方法可以达到预期的效果，但仅在光标触摸顶部div时才改变高度。

我也尝试向底部div添加相同的功能，但它会产生奇怪的镜像效果，就像它们在相反方向工作一样。

我需要获取它，以便在上下移动屏幕时始终使顶部div和底部div保持距光标约40px。

我想不出如何补偿所需的空间，以及如何使两个div和谐地工作而不是相反。

http://jsfiddle.net/j2cwqsxk/4/

Answer 1

您几乎自己解决了这个问题，只有最下面的div并没有按要求答复。

当光标向下移动时，底部div必须变小；当光标位于顶部时，它必须是窗口的整个高度。为此，我们需要知道窗口的高度。我使用了一些似乎能很好完成此操作的Javascript代码，然后将底部div的高度计算为new.target：

pageHeight-h-40

请参阅：http://jsfiddle.net/j2cwqsxk/7

Answer 2

这将使用CSS variables和calc()产生相同的效果。它在主体上使用伪元素（::before），并操纵其顶部和底部边框。

注意：IE不支持。

document.addEventListener('mousemove', ({ pageY: h }) =>
  document.documentElement.style.setProperty('--border-pos', `${h}px`)
);

:root {
  --border-size: 40px;
  --border-pos: 0px;
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  border-color: rgba(0, 116, 217, 0.5);
  border-style: solid;
  border-width: calc(var(--border-pos) - var(--border-size)) 0 calc(100vh - var(--border-pos) - var(--border-size)) 0;
  content: '';
}