鼠标事件即跟随案例

鼠标事件即跟随案例

鼠标事件对象

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的值可以移动图片。·