<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>发送短信</title>
<style>
* {
margin: 0;
padding: 0;
}
.aa{
300px;
height:300px;
position: relative;
overflow: hidden;
}
#e{
300px;
height:300px;
}
.mask{
800px;
height:800px;
position: absolute;
left:-250px;
top:-250px;
background: url("./tou.png") no-repeat center;
background-size: contain;
}
</style>
</head>
<body>
<div class="aa" id="main">
<img src="14.jpg" id="e" alt="">
<div class="mask" id="mask"></div>
</div>
</body>
<script>
var mask=document.querySelector("#mask");
var main=document.querySelector("#main");
main.onmousemove=function(e){
console.log(e)
var offsetX=e.clientX;
var offsetY=e.clientY;
var x=offsetX-400
var y=offsetY-400
console.log(x,y)
mask.style.left=x+"px"
mask.style.top=y+"px"
}
</script>
</html>