原理
1、鼠标不断地移动，使用鼠标移动事件：mousemove
2、在页面中移动，给document注册事件
3、图片要移动距离，而且不占位置（开绝对定位）
4、核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x,y坐标作为图片的top和left值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
width: 100px;
height: 100px;
position: absolute;
}
</style>
</head>
<body>
<img src="img/A.jpg" id="pic">
<script type="text/javascript">
document.addEventListener('mousemove',function(e){
let x=e.pageX
let y=e.pageY
pic.style.left=x-50+'px'
pic.style.top=y-50+'px'
})
</script>
</body>
</html>
871
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
