使用 Jquery 基于页面上的光标位置的屏幕掩码
Screen Mask based on cursor position on page using Jquery
我正在尝试在屏幕上添加一个叠加层,然后根据光标在文档中的位置 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 协调工作而不是相反。
你几乎自己解决了问题,只有底部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});
});
这使用 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: '';
}
我正在尝试在屏幕上添加一个叠加层,然后根据光标在文档中的位置 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 协调工作而不是相反。
你几乎自己解决了问题,只有底部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});
});
这使用 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: '';
}