<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
position: absolute;
top:2px;
}
</style>
</head>
<body>
<img src="../事件基础/img/logo-mi2.png" alt="">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove',function(e){
// 核心原理 每次鼠标移动的最新坐标赋值给图片的top 和left 来移动图片
var x = e.pageX;
var y = e.pageY;
pic.style.top = y + 'px'; // 图片的位置一定要用数字+px来表示
pic.style.left = x + 'px';
})
</script>
</body>
</html>
在这段代码里边不仅要监听鼠标移动事件,还用到了获取鼠标在文档页面上的位置 (x和y坐标)
获得坐标之后赋值给图片的top 和 left 这样图片就可以跟随鼠标进行移动了 在赋值时注意一定要添加单位 px 不然仅仅获得的数字是无用的