javascript小案例-----跟随鼠标移动的小天使

效果如下:

代码思路:

 1.鼠标不断的移动,使用鼠标移动事件:mousemove

 2.在页面中移动,给document注册事件

 3.图片要移动距离,而且不占位置,使用相对定位

  核心原理:每次鼠标移动,都会获得最新的鼠标坐标,把这个x和y作为图片的top和left值就可以移动图片

html代码:

    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fa52648db5b3b933dda6105660800bf4b3333c13149dca-FftD1U_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657459150&t=49cabde7b8d86ca045074ceaaab3a87a"
        alt="">

css代码:

        img {
            position: absolute;
            width: 100px;
        }

javascript代码:

 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;
        console.log("x坐标是:" + x, "y坐标是" + y);
        // 3. 不要忘记给left和top添加px单位
        pic.style.left = x - 50 + "px";
        pic.style.top = y - 50 + "px";
    })

注意:不要忘记给left和top添加px单位