如何从 javascript 中排除图像？

问题描述

我正在 codepen 尝试这个东西， 这里有几件事。

1. 我希望将鼠标悬停在文本上时出现的蓝色填充图像绝对定位，在滚动时保持在同一位置，但现在它随着文本向上滚动。

2. 我希望图像不跟踪鼠标并保持平坦，我正在寻找如何将元素从父 div 中取出，但似乎这不是解决方案？

有人可以帮忙吗？

    <div id="ex1" class="container">
      <div id="ex1-layer" class="Box">
        <a id="hero-text" href="#"><img id="hero-img" src="https://dummyimage.com/150x150/0066ff/fff">LOREM IPSUM!</a>
        <a id="hero-text" href="#"><img id="hero-img" src="https://dummyimage.com/150x150/0066ff/fff">IS A PLACEHOLDER TEXT</a>
        <a id="hero-text" href="#"><img id="hero-img" src="https://dummyimage.com/150x150/0066ff/fff">COMMONLY USED</a>
        <a id="hero-text" href="#"><img id="hero-img" src="https://dummyimage.com/150x150/0066ff/fff">IN THE GRAPHIC,</a>
        <a id="hero-text" href="#"><img id="hero-img" src="https://dummyimage.com/150x150/0066ff/fff">PRINT,AND PUBLISHING INDUSTRIES</a>
        <a id="hero-text" href="#"><img id="hero-img" src="https://dummyimage.com/150x150/0066ff/fff">FOR PREVIEWING</a>
        <a id="hero-text" href="#"><img id="hero-img" src="https://dummyimage.com/150x150/0066ff/fff">LAYOUTS AND</a>
        <a id="hero-text" href="#"><img id="hero-img" src="https://dummyimage.com/150x150/0066ff/fff">VISUAL MOCKUPS.</a>
    
      </div>
    </div>

body {
  background: hsla(220,6%,12%,1);
}

a {
  color: inherit;
  text-decoration: inherit;
}

.container {
  position: relative;
  height: 75vh;
  width: 75vw;
  top: 12.5vh;
  left: 12.5vw;
  /*border: 2px solid red;*/
}

.Box {
  position: relative;
  width: 75vw;
  height: 75vh;
  /*border: 2px solid green;*/
}

#hero-text {
  font-family: roboto;
  font-weight: 500;
  font-size: 6rem;
  line-height: 0.9em;
  display: inline;
  margin: 0 20px;
  color: white;
  opacity: 0.2;
  transition: 0.3s ease-in-out;
  flex-direction: reverse;
  /*border: 2px solid blue;*/
}

#hero-img {
  position: absolute;
  top: 50%;
  left: 80%;
  width: 20vw;
  height: auto;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: 0.3s ease-in-out;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

#hero-text:hover {
  opacity: 1;
  transition: 0.3s ease-in-out;
  }

#hero-text:hover #hero-img {
  opacity: 1;
  transition: 0.3s ease-in-out;
  }

let constrain = 300;
let mouSEOverContainer = document.getElementById("ex1");
let ex1Layer = document.getElementById("ex1-layer");

function transforms(x,y,el) {
  let Box = el.getBoundingClientRect();
  let calcX = -(y - Box.y - (Box.height / 2)) / constrain;
  let calcY = (x - Box.x - (Box.width / 2)) / constrain;
  
  return "perspective(500px) "
    + "   rotateX("+ calcX +"deg) "
    + "   rotateY("+ calcY +"deg) ";
};

 function transformElement(el,xyEl) {
  el.style.transform  = transforms.apply(null,xyEl);
}

mouSEOverContainer.onmousemove = function(e) {
  let xy = [e.clientX,e.clientY];
  let position = xy.concat([ex1Layer]);

  window.requestAnimationFrame(function(){
    transformElement(ex1Layer,position);
  });
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）