如何利用mouseevent实现圆形遮罩跟随鼠标移动效果？

问题修复方案 #

核心问题说明

1. CSS 中的 clip-path 属性未绑定你定义的 --clip-position 变量，修改该变量不会触发样式变化
2. 你的 HTML 文件未引入 main.js，JS 逻辑不会执行
3. 圆心坐标不需要额外减 100，直接使用鼠标坐标即可适配半径 200px 的圆形

调整后代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="mask-container">
      <img src="./image/simpsons.jpeg" alt="Morraine Lake" id="clipped-image">
    </div>
    <!-- 新增main.js引入 -->
    <script src="main.js"></script>
</body>
</html>

CSS

:root {
  --clip-position: center;
}

body {
  background-color: black;
  margin: 0;
}

.mask-container img {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100vh;
  /* 绑定自定义变量作为圆形位置参数 */
  -webkit-clip-path: circle(200px at var(--clip-position));
  clip-path: circle(200px at var(--clip-position));
}

MAIN.JS

const $cImg = $('#clipped-image');
const $body = $('body');

$body.mousemove(function(e) {
  $cImg.css('--clip-position', `${e.pageX}px ${e.pageY}px`);
});

内容的提问来源于stack exchange，提问作者98SSVM