图片跟着鼠标移动案例

来源：图艺博知识网

案例分析

① 鼠标不断的移动，使用鼠标移动事件： mousemove

② 在页面中移动，给document注册事件

③ 图片要移动距离，而且不占位置，我们使用绝对定位即可

④ 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的

top和left 值就可以移动图片

<!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;
            width: 100px;
        }
    </style>
</head>

<body>
    <!-- 图片跟随鼠标移动案例 -->
    <img src="./images/1.jfif" alt="">
    <script>
        // 图片跟随鼠标移动，是将鼠标在页面中的位置给了图片。、
        var pic = document.querySelector('img');
        //鼠标在页面文档中移动，mousemove鼠标只要移动，就会获得新的鼠标坐标。将鼠标的坐标给pic的top和left值，就可以移动图片
        document.addEventListener('mousemove', function (e) {
            // console.log(e.pageX);
            // console.log(e.pageY);
            var x = e.pageX, y = e.pageY;
            pic.style.left = x + 'px';     //注意图片的位置要添加px单位
            pic.style.top = y + 'px';
        })

    </script>
</body>

</html>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文