小红点跟随鼠标移动，并且让这个小红点精确地出现在鼠标指针的位置

本文链接：https://blog.youkuaiyun.com/weixin_45916098/article/details/144142868

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>跟随鼠标的小红点</title>
    <style>
        body {
            height: 100vh;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
        }
        .i-pick-tip {
            position: absolute;
            width: 10px; /* 小红点的宽度 */
            height: 10px; /* 小红点的高度 */
            background-color: red; /* 小红点的颜色 */
            border-radius: 50%; /* 使div变成圆形 */
            pointer-events: none; /* 使 div 不影响鼠标事件 */
            z-index: 1000; /* 确保 div 显示在其他内容之上 */
        }
    </style>
</head>
<body>
    <script>
        // 创建新的 div 元素
        const doc = document.createElement("div");
        doc.className = "i-pick-tip";

        // 将新创建的 div 添加到文档中
        document.body.appendChild(doc);

        // 监听 mousemove 事件
        document.addEventListener('mousemove', function(event) {
            // 更新 div 的位置
            doc.style.left = `${event.clientX - 5}px`; // 减去一半宽度，使中心对齐
            doc.style.top = `${event.clientY - 5}px`; // 减去一半高度，使中心对齐
        });
    </script>
</body>
</html>