代码如下
<!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>
</head>
<style>
body {
background-color: aqua;
}
img {
position: fixed;
width: 80px;
}
</style>
<body>
<img src="../img/p70_tianshi.gif" alt="">
</body>
<script>
var img = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
img.style.left = e.clientX-25 + "px";
img.style.top = e.clientY-40 + "px";
})
</script>
</html>
图片如下
效果
注意:
1、图片的路径和名字不要搞错
2、如果要用其他图片的话尽量找没背景的图片,不然影响观感
3、因为天使的高比宽稍大一些,所以倒数第四五行一个减了25一个减了40,这俩数也是试出来的,使效果比较好看