代码之家 › 专栏 › 技术社区 › Brian Revie

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

mouseevent css html jquery

0

Brian Revie · 技术社区 · 7 年前

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

我意识到我必须用两个div来做这个。屏幕上半部分为1 Div,下半部分为1 bottom Div。

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

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

我试着加入到选美活动中来,并像这样更改顶部div的高度:

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


    });

这种方法可以达到预期的效果,但它只在光标接触到顶部div时改变高度。

我试图在底部div中添加相同的函数,但它创建了一个奇怪的镜像效果,就像它们在相反的位置工作一样。

我需要得到它,使顶部div和底部div在屏幕上下移动时始终远离光标约40px。

我不知道如何抵消所需的空间,也不知道如何使两个div和谐地工作,而不是相反。

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

2 回复 | 直到 7 年前

1

KIKO Software 7 年前

你自己几乎解决了这个问题,只有最底层的人没有按要求回应。

当光标向下移动时,底部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

2

1

Ori Drori 7 年前

这将使用 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: '';
}