正文
js 图片跟随鼠标移动效果 案例
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!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; /*因为跟着鼠标移动，不占用位置，所以使用绝对定位*/
}
</style>
</head>
<body>
<img src="./images/tianshi.jpg" alt="">
<script>
var pic = document.querySelector('img')
document.addEventListener('mousemove',function(e){
//1.mousemove 只要鼠标移动1px 就会除服事件
//2.核心原理：每次鼠标移动，我们都会获取最新的鼠标坐标，把这个x和y坐标作为图片的top和left值
//就可以移动图片了
var x = e.pageX;
var y= e.pageY; //page返回的是从可以滚动条的最顶端开始到鼠标点击Y轴的坐标 ie9+以上支持 最常用
console.log(x,y)
pic.style.left=x + 'px'; //注意一定要增加单位
pic.style.top=y + 'px'; })
</script></body>
</html>
