写一个让一句话随着鼠标移动的小插件

Answer 1

function mousemoveWithText(text, options) {
  options = options || {};
  const $el = text instanceof HTMLElement ? text : createElement();
  const pos = { x: -9999, y: - 9999 };
  // TODO: 移动后才第一次能显示，有点糟糕
  window.onmousemove = handleMove;

  setTextPosition();
  (function loop() {
    setTextPosition();
    // TODO: 如果需要销毁，需要存变量
    requestAnimationFrame(loop);
  })();

  function createElement() {
    const $el = document.createElement('div');
    $el.innerText = text;
    $el.style.position = 'fixed';
    $el.style.pointerEvents = 'none';
    document.body.appendChild($el);
    return $el;
  }

  function handleMove(e) {
    pos.x = e.clientX;
    pos.y = e.clientY;
    // TODO: 超出屏幕应隐藏，不然会造成比如 scroller-x 超出
  }

  function setTextPosition() {
    const { x, y } = pos;
    $el.style.left = x + 10 + 'px';
    $el.style.top = y - 10 + 'px';
  }
}

mousemoveWithText('xxxx');