Question

我需要一点帮助：这是其中的一段代码：

html：

<div class="contain">
  <div class="background-image background-cover"></div>
  <div class="circle">
    <div class="inside blur-big background-cover"></div>
    <div class="inside blur-small background-cover"></div>
    <div class="inside clear background-cover"></div>
  </div>
</div>

CSS：

.contain {
  position: relative;
  height: 200px;
  margin-left: -98px;
  width: 150%;
}

.background-cover {
  width: 100%;
  height: 100%;
  background: no-repeat center center fixed;
  background-size: cover;
  -webkit-background-size: cover;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(36, 36, 36);
  background-attachment: scroll;
  background-image: url(https://dummyimage.com/600x400/000/fff);
}

.circle {
  position: absolute;
  border-radius: 100%;
  width: 115px;
  height: 115px;
  box-sizing: border-box;
}

.circle .inside {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  background-image: url(https://dummyimage.com/600x400/000/fff);
}

.blur-big {
  height: 100%;
  width: 100%;
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

/* positioned slightly 'inside' the big blur */

.blur-small {
  margin: 5px;
  height: 105px;
  width: 105px;
  -webkit-filter: blur(1px);
  filter: blur(1px);
}

.clear {
  margin: 10px;
  height: 95px;
  width: 95px;
}

JavaScript：

if ('ontouchstart' in window) {

} else
  addContainMouseMoveFunctionality(); //just add this functionality when it'll be used


function addContainMouseMoveFunctionality() {

  //do as little as possible in the mousemove-event, so initiate variables here
  let circle = document.getElementsByClassName('circle')[0];
  let contain = document.getElementsByClassName('contain')[0];

  //add event listener for the mouse enters the image, show circle
  contain.addEventListener("mousemove", moveCircle);

  //add event listener for when the mouse leaves the image, hide circle
  contain.addEventListener("mouseout", function(e) {

    //give the circle a position outside the viewport
    circle.style.top = '-999px';
    circle.style.left = '-999px';

  });

  function moveCircle(e) {

    //get the offset from the top to avoid the circle going all over the place when scrolling down or horizontally
    let doc = document.documentElement;
    let left = window.pageXOffset - doc.scrollLeft + doc.clientLeft;
    let top = window.pageYOffset - doc.scrollTop + doc.clientTop;

    //give the circle a position near the mouse, position minus half of its width/height to center it
    circle.style.top = top + e.pageY - circle.offsetHeight / 2 + 'px';
    circle.style.left = left + e.pageX - circle.offsetWidth / 2 + 98 + 'px'; // 98 is for the margin of contain
  }
}

我认为问题出在这些公式上，但也许不是：

circle.style.top = top + e.clientY - circle.offsetHeight / 2 + 'px';
circle.style.left = left + e.clientX - circle.offsetWidth / 2 + 98 + 'px';

以下是一个小提琴，显示了它的工作方式：https://jsfiddle.net/hw615quf/7/ https://jsfiddle.net/hw615quf/7/

当您向右滚动一点时，您将看到问题所在：以光标为中心的圆现在不再居中... 在这个小提琴中这不是问题，但是当我将代码与Salient合并到Wordpress网站上时，圆圈就在光标位置上下左右。当我向下滚动时，圆圈稍微靠近图像，但仍未居中...而且无论如何，我不希望仅当图像几乎不可见时才使圆圈居中。

也许是我的公式有问题？有人可以帮我滚动一下吗？

感谢您的帮助和阅读，祝您白天/晚上/晚上过得愉快：）

本杰明

Answer 1

clientX和clientY不会更改，因为页面滚动更改会保持不变。在这种情况下，您应该使用pageX和pageY。像这样

circle.style.top = top + e.pageY - circle.offsetHeight / 2 + 'px';
circle.style.left = left + e.pageX - circle.offsetWidth / 2 + 98 + 'px';

这是一个有效的示例https://jsfiddle.net/681Lakn0/

使用javascript移动元素来处理网页滚动时出现问题

1 个答案: