JavaScript跟随鼠标天使

最新推荐文章于 2022-10-04 15:40:33 发布

我拿青春赌未来~

最新推荐文章于 2022-10-04 15:40:33 发布

阅读量338

点赞数 16

文章标签：大数据 javascript html5 前端 html

本文链接：https://blog.csdn.net/helongzhi/article/details/125505489

版权

mousemove事件鼠标坐标图片定位 absolute定位 JavaScript

关键词由CSDN通过智能技术生成

主要是利用鼠标移动事件 mousemove

mousemove 只要我们鼠标移动1px就会触发事件

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

注意：一定要给图片加上绝对定位

代码如下

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

 <img src="./src=http___5b0988e595225.cdn.sohucs.com_q_70,c_zoom,w_640_images_20171222_bcf485ec720349d2bc3916a1bb064c3d.gif&refer=http___5b0988e595225.cdn.sohucs.gif" alt="">

var pic=document.querySelector("img");
        // 鼠标移动事件 mousemove
        document.addEventListener("mousemove",function(e){
          

            var x=e.pageX;
            var y=e.pageY;
            console.log("x坐标"+x,"y坐标"+y);
            // 千万不要忘记给left和top加单位px
pic.style.left=x-50+"px";
pic.style.top=y-40+"px";
        })