自定义鼠标样式

自定义鼠标样式

在js的学习中，我突然好奇鼠标的样式怎么自定义，于是在上学期就写了一个自定义纸飞机鼠标样式但是结果并不尽人意。
问题：鼠标移动时，纸飞机也会跟着鼠标同时移动，一切还算正常，但是当滚轮滚动时，纸飞机与鼠标之间拉开了距离。
这是因为纸飞机是相对于页面顶部定位的，开启的是绝对定位，所以导致滚轮移动时产生距离偏差。
解决办法：不将纸飞机设置为绝对定位，而设置为固定定位！
代码如下：
<body onmousemove="coordinates(event)">
<button>dianwo </button>

<div id="mouse">
        <img src="./img/sb1.png" alt="">
    </div>
<script type="text/javascript">
var mouse=document.getElementById("mouse");
    function coordinates(event){
        
      var  x=event.screenX;
       var  y=event.screenY;
        mouse.style.left=x+"px";
         mouse.style.top=y-100+"px";
       
    }


    </script>
</body>


<style>
  *{
      margin: 0;
      padding: 0;
  }  
body{
    width: 100%;
    height: 2000px;
    background-color: #bfa;
    
}
#mouse{
    width: 30px;
    height: 30px;
    position: fixed;
     
}
*{
    cursor: none;
}
</style>
![](https://img2022.cnblogs.com/blog/2779355/202203/2779355-20220317214915123-1542473548.png)

event.screenX是获取可见区域内，横坐标，同理，另一个是纵坐标

posted @ 2022-03-17 21:55  一段香，三分白  阅读(201)  评论(0)    收藏  举报