使用 Jquery 基于页面上的光标位置的屏幕掩码

Question

我正在尝试在屏幕上添加一个叠加层，然后根据光标在文档中的位置 window 会有一个透明区域，您可以在其中看到下面的网站，但其他所有内容都被屏蔽掉了。

我意识到我必须用 2 divs 来完成这个。 1 Div 用于屏幕的上半部分，然后底部 div 用于屏幕的下半部分。

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

我试图让 2 div 根据光标在屏幕上的位置改变它们的高度，这样我就可以在屏幕上上下移动查看窗格。

我尝试绑定到 pageY 事件并更改顶部的高度 div，如下所示：

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


    });

这种方式达到了预期的效果，但它只会在光标触及顶部时改变高度 div。

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

我需要得到它，以便在屏幕上下移动光标时，顶部 div 和底部 div 始终与光标保持 40 像素左右的距离。

我不知道如何抵消所需的 space 以及如何使两个 div 协调工作而不是相反。

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

Answer 1

你几乎自己解决了问题，只有底部div没有按要求回复

当光标向下移动时底部 div 必须变小，当光标在顶部时它必须是 window 的完整高度。为此，我们需要知道 window 的高度。我使用了一些似乎做得很好的 Javascript 代码，然后我将底部 div 的高度计算为 pageHeight-h-40:

var body = document.body,
    html = document.documentElement;

var pageHeight = Math.max( body.scrollHeight, body.offsetHeight, 
                           html.clientHeight, html.scrollHeight, html.offsetHeight );


$( document ).mousemove(function( event ) { 
            var h = event.pageY;
            $('#rwMaskTop').css({"height":h-40}); 
            $('#rwMaskBottom').css({"height":pageHeight-h-40});     
        });

参见：http://jsfiddle.net/j2cwqsxk/7

Answer 2

这使用 CSS variables and calc() 产生相同的效果。它在 body 上使用伪元素 (::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: '';
}

使用 Jquery 基于页面上的光标位置的屏幕掩码

Screen Mask based on cursor position on page using Jquery

jquery

html

css

mouseevent