文章目录

示例

效果

代码

思路：监听鼠标移动事件，获取鼠标的坐标。然后，修改元素的坐标，即可使元素跟随鼠标移动。

项目结构

HTML

index.html 文件：

main.js 文件：

window.onload = (event) => {// console.log(event);main();
 }function main() {const span = document.createElement("span");span.innerText = "123";span.style.setProperty("display", "none");span.style.setProperty("box-shadow", "0px 0px 2px 1px rgba(0, 0, 0, 0.4)");span.style.setProperty("padding", "0px 5px");span.style.setProperty("position", "fixed");document.body.appendChild(span);document.onmousemove = (event) => {// console.log(event);console.log(event.clientX, event.clientY);// console.dir(span);span.innerText = event.clientX + ", " + event.clientY;span.style.setProperty("display", "inline");span.style.setProperty("top", (event.clientY + 10) + "px");span.style.setProperty("left", (event.clientX + 10) + "px");}
 }
 

参考

Coordinate systems > Standard CSSOM coordinate systems > Client