将鼠标光标居中在圆圈内答案

【问题标题】：Center the Mouse cursor inside the circle将鼠标光标居中在圆圈内
【发布时间】：2021-06-12 17:58:03
【问题描述】：

我无法将默认鼠标光标置于鼠标光标后面的圆圈内

看到这张图片

// 创建一个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);
  
}

initCursor()

【问题讨论】：

标签： javascript css animation

【解决方案1】：

使用

从每一侧删除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;
}

【讨论】：

我不认为这是使用 css calc() fn 的高效方法
@Dpk 我不知道你所说的高性能方式是什么意思，但这个解决方案是动态的和可扩展的。如果您决定使用不同尺寸的不同圆圈，则无需更改任何变量
是的，你是对的，但是你删除了 translate3d，因为它利用了 GPU 并提供了性能提升，而且 calc() 成本太高，主要关注的是性能
@Dpk 你可以保留它，只需将我的代码放入 translate3D 而不是 translate
@Dpk 我已经用 3d 更新了我的代码，但没有任何改变

【解决方案2】：

我更改了这些行 -

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;
}

【讨论】：

是的，它的工作原理是它的高性能方式，因为它改变了在 requestAnimationFrame 中调用的函数内的行，如果圆圈在某些情况下变大怎么办

【解决方案3】：

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

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

  ...

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

  ...
}

【讨论】：