# 高级事件图片随鼠标移动效果

最新推荐文章于 2023-06-09 22:00:00 发布

大名张无忌

最新推荐文章于 2023-06-09 22:00:00 发布

阅读量108

点赞数

分类专栏： # DOM 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_40029828/article/details/105019558

版权

DOM 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

核心思想：鼠标移动的X和Y坐标赋值给绝对定位的图片
注意clientX、pageX与screenX的区别：分别对应浏览器文档可见区左上角、整个页面文档左上角、屏幕左上角

</head>
<style>
    img {
        position: absolute;;
        width: 70px;
        height: 35px;
    }
</style>
<body>
<img src="images/afternoon.png" alt="">
<script>
    var pic = document.querySelector('img');
    document.addEventListener('mousemove', function (ev) {
    //鼠标原定位会在图片左上角，采取上移和左移图片一半的方法将鼠标定在图片中间
        pic.style.top = ev.pageY - 17 + 'px';
        pic.style.left = ev.pageX - 35 + 'px';
    });
</script>
</body>