效果：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
#main {
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
}
#main img {
width: 300px;
height: 300px;
}
.mask {
width: 800px;
height: 800px;
position: absolute;
left: -250px;
top: -250px;
background: radial-gradient(transparent, black, black);
background-size: contain;
}
</style>
</head>
<body>
<div id="main">
<img src="1.jpg">
<div class="mask" id="mask"></div>
</div>
</body>
<script>
// 获取遮罩
var mask = document.querySelector("#mask");
// 获取容器
var main = document.querySelector("#main");
// 监听容器的鼠标移动事件
main.onmousemove = function(e) {
// 获取鼠标在容器上的坐标
var offsetX = e.clientX - main.offsetLeft;
var offsetY = e.clientY - main.offsetTop;
// 计算遮罩的left、top值
var x = offsetX - 400
var y = offsetY - 400
// 设置遮罩的坐标
mask.style.left = x + "px"
mask.style.top = y + "px"
}
</script>
</html>
