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

Question

我是编码新手，我已经尝试解决这个问题一段时间了。 我目前正在自学如何用鼠标移动圆形蒙版。 我已经想出了如何创建蒙版，但我正在努力向其中添加脚本； 这就是我到目前为止所得到的（到目前为止使用随机图像进行项目）。 我真的被困住了，如果有人可以查看我的代码并提供见解，我将不胜感激。

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);
}

主文件

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

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

Answer 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+"%");
});

我现在无法测试，但我希望这有效。

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

问题描述

1 个解决方案

解决方案1
0 2021-11-12 23:34:56

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

问题描述

1 个解决方案

解决方案1 0 2021-11-12 23:34:56

解决方案1
0 2021-11-12 23:34:56