简单的CSS+JS实现鼠标指针附带图标

html部分直接在body开头加上img图标地址即可

<img src="图标地址" class="xg-mouse">

图标建议使用透明背景的png或svg

CSS部分直接定义图标大小和绝对定位即可

.xg-mouse {width:40px;height:40px;position: absolute;}

JS部分使用简单的移动鼠标来定义x和y值随动

document.addEventListener('mousemove',(e) => { let x = e.clientX; let y = e.clientY; let img = document.querySelector('.xg-mouse'); img.style.top = y + 'px'; img.style.left = x + 'px'; })

 

运行DEMO