时间戳

首页 > 解决方案 > 让链接跟随剪辑路径

javascript - 让链接跟随剪辑路径

问题描述

我试图弄清楚如何仅在现有剪辑路径的区域内显示可点击的链接。并且还利用现有的 OffsetX 值。

<style>
.mouse {
  background-color: aqua;
}
              
.img {
  background-color: black;
}
</style>
            
<div class="wrap">
  <div class="img"></div>
  <div class="mouse">
    <p id="anchor"></p>
  </div>    
</div>
             
<script>
let main = document.querySelector('.wrap');
let mouse = document.querySelector('.mouse');
let text = "Text link";
let result = text.link("www.stackoverflow.com");
document.getElementById("anchor").innerHTML = result;
 
main.addEventListener('mousemove', (e) => {
  mouse.style.clipPath = `circle(15em at ${e.offsetX}px`; 
});
</script>

标签： javascripthtmlcssclip-path

解决方案

如果我理解正确，您希望链接与剪辑路径一起移动。

我会这样做：

mouse.style.clipPath = `circle(5em at ${(e.clientX - main.getBoundingClientRect().x)}px`; 
document.getElementById("anchor").style = "margin-left: " + (e.clientX - main.getBoundingClientRect().x) + "px";

这不使用 offsetX，但是当您移动链接时，offsetX 也会移动（因此它会保持不变），除非您禁用链接的指针事件（这可能不是有意的）。

推荐阅读