简单的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