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

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

我意识到我必须用两个div来完成这个任务。屏幕上半部分为1 Div，屏幕下半部分为1 Div

正如你在图片中可以看到的那样，蓝色区域是顶部和底部的div，屏蔽网站的空隙，在中间看到下面的网站。

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

我试着加入pageY活动，并像这样改变顶级跳水运动员的高度：

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


    });

这种方法可以达到所需的效果，但它只会在光标触及顶部div时改变高度

我还试图在底部div中添加相同的函数，但它会产生一种奇怪的镜像效果，就像它们在相反方向工作一样

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

我不知道如何抵消所需的空间，并使两个div协调工作，而不是相反

---

您几乎自己解决了问题，只有最底层的div没有按需要响应

当光标向下移动时，底部div必须变小，当光标位于顶部时，底部div必须是窗口的整个高度。要做到这一点，我们需要知道窗户的高度。我使用了一点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});     
        });

---

请参阅：

您几乎自己解决了问题，只有最下面的div没有按要求响应

当光标向下移动时，底部div必须变小，当光标位于顶部时，底部div必须是窗口的整个高度。要做到这一点，我们需要知道窗户的高度。我使用了一点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});     
        });

---

请参阅：

这将使用和创建相同的效果。它在主体上使用伪元素（

：：before

），并操纵其顶部和底部边界

注意：不受IE支持

document.addEventListener（'mousemove'，（{pageY:h}）=>
document.documentElement.style.setProperty（'--border pos'，`${h}px`）
);
：根目录{
--边框尺寸：40px；
--边界位置：0px；
}
身体：：之前{
位置：固定；
排名：0；
右：0；
底部：0；
左：0；
z指数：10000；
指针事件：无；
边框颜色：rgba（0,116,217,0.5）；
边框样式：实心；
边框宽度：计算（var（--边框位置）-var（--边框大小））0计算（100vh-var（--边框位置）-var（--边框大小））0；
内容：''；
}
这将使用和创建相同的效果。它在主体上使用伪元素（
：：before
），并操纵其顶部和底部边界

注意：不受IE支持


document.addEventListener（'mousemove'，（{pageY:h}）=>
document.documentElement.style.setProperty（'--border pos'，`${h}px`）
);
：根目录{
--边框尺寸：40px；
--边界位置：0px；
}
身体：：之前{
位置：固定；
排名：0；
右：0；
底部：0；
左：0；
z指数：10000；
指针事件：无；
边框颜色：rgba（0,116,217,0.5）；
边框样式：实心；
边框宽度：计算（var（--边框位置）-var（--边框大小））0计算（100vh-var（--边框位置）-var（--边框大小））0；
内容：''；
}
你的意思是这样的吗？你太棒了！太棒了！谢谢你的帮助！这几乎正是我想要实现的！我在mousemove函数之外添加了变量，但它不起作用，然后将它们移到了里面，它就完美地工作了请将您的评论作为答案发布，我会将其标记为正确：）您的意思是这样的吗？你太棒了！太棒了！谢谢你的帮助！这几乎正是我想要实现的！我在mousemove函数之外添加了变量，但它不起作用，然后将它们移到了里面，它就完美地工作了请将您的评论作为答案发布，我会将其标记为正确：）谢谢您，Ori，您的解决方案非常有趣，可以看到这种效果是如何以完全不同的方式实现的。你的建议很有效。我也需要在所有浏览器中使用此功能，但非常感谢您抽出时间来支持我和您的Ori，您的解决方案非常有趣，可以看到如何以完全不同的方式实现此效果。你的建议很有效。我也需要这在所有浏览器中都能工作，但非常感谢您抽出时间支持我为您提供的友好和简洁的答案。这完全解决了我希望达到的问题。谢谢Kiko谢谢你的友好和简洁的回答。这完全解决了我希望达到的问题。谢谢你，KIKO