api - 跟随鼠标

212 阅读1分钟

通过事件监听可以获取鼠标位置信息

这是鼠标移动,图片跟踪鼠标移动
      document.addEventListener('mousemove', function(e) {
     // document.body.addEventListener('mousemove', function() {
        console.log(e.clientX, e.clientY)
        
        //img.offsetWidth 图片的宽度 、 img.offsetHeight 图片的高度
        img.style.marginLeft = e.clientX - img.offsetWidth / 2 + 'px'
        img.style.marginTop = e.clientY - img.offsetHeight / 2 + 'px'
      })

获取到的是鼠标与显示器窗口的相对位置
    screenX
    screenY

获取到的是鼠标与浏览器的窗口的相对位置
    clientX
    clientY

可以通过输出事件支持的功能来查看
    document.addEventListener('mousemove', function (e) {
        console.log(e)
    }