如何使用鼠标事件使圆形蒙版移动？答案

【问题标题】：How to make circle mask move using mouseevent?如何使用鼠标事件使圆形蒙版移动？
【发布时间】：2021-11-12 17:23:11
【问题描述】：

我是编码新手，我已经尝试解决这个问题一段时间了。我目前正在自学如何用鼠标移动圆形蒙版。我已经想出了如何创建蒙版，但我正在努力将脚本添加到其中；这就是我目前所拥有的(project so far using random image)。我真的被困住了，如果有人可以查看我的代码并提供见解，我将不胜感激。

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>
</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);
  clip-path: circle(200px);
}

MAIN.JS

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

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

【问题讨论】：

你也许可以在这里找到你要找的东西：https://stackoverflow.com/questions/39654546/interactive-background-mask-with-mousemove-jquery-css

标签： javascript html jquery mouseevent mask

【解决方案1】：

这个代码是错误的我会推荐这个，除非你使用 HTML 但仍然有这样的 mousemove 功能，否则没有其他方法：

var $cImg = $("#clipped-image");
var body = document.getElementsByTagName("body");

body.mousemove(function(e) {
    $cImg.css("border-radius", e.pageX-100+"%");
    $cImg.css("border-radius", e.pageY-100+"%");
});

我现在无法测试，但我希望这可行。

【讨论】：

非常感谢您的回答，我决定尝试在 HTML 和单独的 main.js 文件中使用您的脚本，但仍然无法正常工作。您认为我没有看到其他可能的错误吗？