将鼠标光标置于圆圈内

Question

我无法将默认鼠标光标置于跟随鼠标光标的圆圈内居中

查看此图片

// 创建一个 html 元素并附加到 body

const dpkCursor = document.createElement("div");
dpkCursor.classList.add("dpkCursor");
document.body.appendChild(dpkCursor);

// 创建圆圈跟随光标的函数

function initCursor(speedOption = 0.25) {
  
    let dpkCursorMouse = { x: -100, y: -100 };
    let dpkCursorPos = { x: 0, y: 0 };
    let speed = speedOption;
   

    window.addEventListener("mousemove", (e) => {
      dpkCursorMouse.x = e.x;
      dpkCursorMouse.y = e.y;
    });

    const updatePosition = () => {
      dpkCursorPos.x += (dpkCursorMouse.x - dpkCursorPos.x) * speed;
      dpkCursorPos.y += (dpkCursorMouse.y - dpkCursorPos.y) * speed;
      
               
      dpkCursor.style.transform = `translate(${dpkCursorPos.x}px ,${dpkCursorPos.y}px)`;
    
    };

    function loop() {
      updatePosition();
      requestAnimationFrame(loop);
    }
    requestAnimationFrame(loop);
  
}

初始化游标()

Answer 1

我更改了这些行 -

const offset = 15;
dpkCursorPos.x += (dpkCursorMouse.x - dpkCursorPos.x - offset) * speed;
dpkCursorPos.y += (dpkCursorMouse.y - dpkCursorPos.y - offset) * speed;

工作演示 -

const dpkCursor = document.createElement("div");
dpkCursor.classList.add("dpkCursor");
document.body.appendChild(dpkCursor);

function initCursor(speedOption = 0.25) {
  let dpkCursorMouse = { x: -100, y: -100 };
  let dpkCursorPos = { x: 0, y: 0 };
  let speed = speedOption;

  //center the circle around cursor

  window.addEventListener("mousemove", (e) => {
    dpkCursorMouse.x = e.x;
    dpkCursorMouse.y = e.y;
  });

  const updatePosition = () => {
    const offset = 15;
    dpkCursorPos.x += (dpkCursorMouse.x - dpkCursorPos.x - offset) * speed;
    dpkCursorPos.y += (dpkCursorMouse.y - dpkCursorPos.y - offset) * speed;

    // dpkCursor.style.transform = `translate3d(${dpkCursorPos.x}px ,${dpkCursorPos.y}px, 0)`;

    dpkCursor.style.transform = `translate(${dpkCursorPos.x}px ,${dpkCursorPos.y}px)`;
  };

  function loop() {
    updatePosition();
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
}

initCursor();

body{
  background:black;
}

.dpkCursor {
  height: 1.75rem;
  width: 1.75rem;
  position: fixed;

  /* Hack For Verson 2 */
  /* margin:-14px; */
  
  
  top: 0;
  left: 0;
  color: white;
  border: 2px solid #fff;
  mix-blend-mode: difference;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
}

Answer 2

只需使用

从每一侧移除50%

dpkCursor.style.transform = `translate(calc(${dpkCursorPos.x}px - 50%) ,calc(${dpkCursorPos.y}px - 50%))`;

const dpkCursor = document.createElement("div");
dpkCursor.classList.add("dpkCursor");
document.body.appendChild(dpkCursor);


function initCursor(speedOption = 0.25) {
  
    let dpkCursorMouse = { x: -100, y: -100 };
    let dpkCursorPos = { x: 0, y: 0 };
    let speed = speedOption;
   
    //center the circle around cursor       
 
    window.addEventListener("mousemove", (e) => {
      dpkCursorMouse.x = e.x;
      dpkCursorMouse.y = e.y;
    });

    const updatePosition = () => {
      dpkCursorPos.x += (dpkCursorMouse.x - dpkCursorPos.x) * speed;
      dpkCursorPos.y += (dpkCursorMouse.y - dpkCursorPos.y) * speed;

      dpkCursor.style.transform = `translate3d(calc(${dpkCursorPos.x}px - 50%) ,calc(${dpkCursorPos.y}px - 50%),0)`;
    
    };

    function loop() {
      updatePosition();
      requestAnimationFrame(loop);
    }
    requestAnimationFrame(loop);
  
}


initCursor()

body{
  background:black;
}

.dpkCursor {
  height: 1.75rem;
  width: 1.75rem;
  position: fixed;
  
  top: 0;
  left: 0;
  color: white;
  border: 2px solid #fff;
  mix-blend-mode: difference;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
}

Answer 3

你能用 CSS 偏移形状吗？这对我有用：

.dpkCursor {
  height: 1.75rem;
  width: 1.75rem;

  ...

  top: -0.875rem;
  left: -0.875rem;

  ...
}

将鼠标光标置于圆圈内

Center the Mouse cursor inside the circle

javascript

css

animation