使用自定义悬停图像效果时，将另一个 html 元素添加到 body 时，图片的方向会在悬停时发生变化

Question

我从这里使用这个效果： https://tympanus.net/codrops/2019/03/12/image-distortion-effects-with-svg-filters/

https://codepen.io/furkanyildiz/pen/bGwebmR

    <div style="height:5rem;">
this div disrupts the render location of images </div>
<main>
  <div class="content">
    <svg class="distort" width="350" height="450" viewBox="0 0 350 450">
      <filter id="distortionFilter">
        <feTurbulence type="turbulence" baseFrequency="0.07 0.01" numOctaves="5" seed="2" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="noise" />
        <feDisplacementMap in="SourceGraphic" in2="noise" scale="0" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" filterUnits="userSpaceOnUse" />
      </filter>
      <g filter="url(#distortionFilter)">
        <image class="distort__img" x="50" y="50" xlink:href="img/1.jpg" height="350" width="250" />
        <image class="distort__img" x="50" y="50" xlink:href="img/2.jpg" height="350" width="250" />
        <image class="distort__img" x="50" y="50" xlink:href="img/3.jpg" height="350" width="250" />
        <image class="distort__img" x="50" y="50" xlink:href="img/4.jpg" height="350" width="250" />
      </g>
    </svg>
    <nav class="menu">
      <a href="#" class="menu__link">Shanghai</a>
      <a href="#" class="menu__link">Taipei</a>
      <a href="#" class="menu__link">Bangkok</a>
      <a href="#" class="menu__link">Kyoto</a>
    </nav>
  </div>
</main>

我想要实现的是：

无论页面大小如何，我都希望鼠标悬停在菜单项上时图像出现在鼠标指针的中间，图片出现的坐标在js代码中根据页面大小调整。

我只想让它根据 .content class 本身进行调整。随着页面尺寸的减小，图片的方向也会发生变化。请帮忙

Answer 1

我找到了解决办法：我尝试运行的效果是使用 pageY 和 pageX 只读属性。当我在使用此效果时向页面添加另一个元素时，页面高度当然会发生变化。 “pageY”值也在变化。

pageY检测相对于window的位置，用下面的代码pageY检测相对于包含的div.

的位置

  this.targetY = pageY - document.querySelector('.myDiv').offsetTop - document.querySelector('html').scrollTop;

我们只是从 pageY 值中提取 offsetTop 和滚动像素数。

I reached the solution from the following answer

使用自定义悬停图像效果时，将另一个 html 元素添加到 body 时，图片的方向会在悬停时发生变化

While using custom hover image effect, when another html element is added to body, the picture's orientation changes on hover

javascript

html

gsap