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

Question

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

我意识到我必须用 2 个 div 来做到这一点。 1 个 div 用于屏幕的上半部分，然后是 bottom div 用于屏幕的下半部分。

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

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

我试图绑定(bind)到 pageY 事件并像这样更改顶部 div 的高度:

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


    });

这种实现了预期的效果，但它只会在光标接触到顶部 div 时改变高度。

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

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

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

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

Answer 1

你几乎自己解决了这个问题，只是底部的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});     
        });

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