1、用到的图片,可以自行截图,也可以自己找喜欢的图片
2、页面效果,跟着鼠标移动而移动
3、代码(图片src自行更改)
<!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 {
width: 50px;height: 50px;
position: absolute;
}
</style>
</head>
<body>
<img src="tianshi.jpeg" >
<script>
var img = document.querySelector('img');
document.addEventListener('mousemove', function (e) {
//mousemove 只要我们鼠标移动 1px 就会触发这个事件
// console.log(e.pageX);
// console.log(e.pageY);
var x = e.pageX;
var y = e.pageY;
img.style.top = y + 'px';
img.style.left = x + 'px';
// img.style.left = x - 50 + 'px';
})
</script>
</body>
</html>