鼠标事件即跟随案例_鼠标跟随案例-优快云博客

本文链接：https://blog.youkuaiyun.com/litternannan/article/details/105266152

本文介绍了如何使用JavaScript的鼠标事件对象（MouseEvent）来获取鼠标坐标，并通过mousemove事件实现图片跟随鼠标移动的效果。核心原理在于实时更新图片的top和left样式属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标事件即跟随案例

鼠标事件对象

event对象代表事件的状态，即事件相关的一系列消息的集合，现阶段我们主要是用鼠标对象事件
MouseEvent和键盘事件对象KeyboardEvent

document.addEventListener('click',function(e){
       //1.client鼠标在可视区的x和y坐标
          console.log(e.clientx);
          console.log(e.clienty);
         
        //2.page鼠标在页面文档的x和y坐标(主要)
            console.log(e.pageX)；
            console.log(e.paheV);


        //3.sreen鼠标在电脑屏幕的x和y坐标
             console.log(e.screenX);
             console.log(e.screenY);

})

跟随鼠标的图片案例

鼠标不断地移动，使用鼠标移动事件：mousemove
在页面中移动：给document注册事件
图片移动距离：不占位置使用决定定位
核心原理：每次鼠标移动我们都可以获得最新的鼠标坐标，把这个x和y坐标作为图片地top和left的值可以移动图片。·

    <img src="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove',function(3){
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x,'y坐标是' + y);
            //记得给left和top加上单位噢
            pic.style.left = x + 'px';
            pic.style.top = y + 'px';


        })
    </script>