JS自定义光标案例

  <img src="images/xxx.png">

 img{
           position: absolute;
           width: 50px;
           height: 50px;
           top: 100px;
           left: 100px;
           cursor: none;
       }

    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;
          //3. 千万不要忘记给我们left 和top 添加px 单位
           pic.style.left=x -25+'px';
           pic.style.top=y -25+'px';
      })

隐藏光标的方式可以有两种：
第一种：cursor: none;这种方式就不用多说了
第二种:JS方式var body=document.body; body.style.cursor='none';通过获取获取body元素设置光标，效果相同！！！
仅供诸君参考