我正在制作一个全屏背景的主页,其中“粒子”随处可见。粒子检测鼠标光标并使用鼠标光标移动。主页有一个带有徽标的垂直居中的div。当鼠标光标位于屏幕中心(垂直方向),在div上方,粒子停止移动并且动画立即停止时,会出现问题。我想要解决这个问题,我认为解决方案是让光标不检测它在该元素上的时间,或者以div为中心。我不知道怎么做。
以下是附加到鼠标光标的块的示例。它将mousemove事件分配给整个文档,而不是特定的div,允许始终跟踪光标,包括在居中的div上。
function moveBlock(event) {
var block = document.getElementById('block');
block.style.left = event.clientX + 'px';
block.style.top = event.clientY + 'px';
}
document.addEventListener('mousemove', moveBlock);
body {
background-color: #aaa;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#block {
background-color: red;
width: 50px;
height: 50px;
/* This is important, and allows the block to move
* This is because the top and left style attributes do not work
* without position being absolute or fixed
*/
position: absolute;
}
#coverup {
background-color: #eee;
padding: 50px;
font-size: 5rem;
font-family: Courier;
text-align: center;
width: 50vw;
height: 50vh;
}
<html>
<body>
<div id="block"></div>
<!-- This is the centered div -->
<div id="coverup">I cover the page</div>
</body>
</html>
我用这个解决了它:
HTML
<div id="no-pointer" class="row">
<div class="col-md-12 col-sm-12">
<h1>Brand</h1>
<h4>Slogan</h4>
<span id="yes-pointer" onclick="openNav()"><a class="smoothScroll btn btn-default">Button</a></span>
</div>
</div>
CSS
#no-pointer{
pointer-events: none;
}
#yes-pointer{
pointer-events: auto;
}