(重要）b站pink老师JavaScript的DOM案例代码——跟随鼠标的天使

快意人生大社畜

已于 2022-08-29 15:07:21 修改

阅读量191

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-08-29 14:56:28 首次发布

本文链接：https://blog.csdn.net/weixin_72322475/article/details/126584996

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

目标效果：

浏览器打开的网页页面（document)中，鼠标移动(mousemove)到哪里，天使的gif图就跟着鼠标移动到哪里

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            /* 图片移动距离又不占位置 用绝对定位 */
            top: 0px;
            /* 定位的组成：定位模式+边偏移 */
        }
    </style>
</head>

<body>
    <img src="images/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function (e) {//鼠标在页面中移动，给document注册事件
            // 1. mousemove只要我们鼠标移动1px 就会触发这个事件
            // console.log(1);
            // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y坐标是' + y);
            //3 . 千万不要忘记给left 和top 添加px 单位
            pic.style.left = x - 50 + 'px';
            pic.style.top = y - 40 + 'px';//天使gif图宽100px高80px,此处x-50  y-40是为了让鼠标居中于盖gif图片


        });
    </script>
</body>