Discourse在页面美化你的鼠标 支持动态

开源 Discourse
1

说一下现在的BUG 首先 精准的鼠标点击后会一直保持但是拖到

image
image666×732 24.6 KB

这个位置又会恢复 不知道是什么问题 我就把代码发出来了

1735225783_new_2

Working

Text

Handwriting

<style>
  /* 隐藏所有元素的默认光标 */
  * {
    cursor: none !important; /* 隐藏所有元素的系统光标 */
  }

  /* 自定义鼠标容器 */
  .custom-cursor {
    position: fixed;
    width: 32px; /* 调整大小 */
    height: 32px;
    pointer-events: none;
    z-index: 9999;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('https://www.justnainai.com/uploads/default/original/3X/7/4/74fac9974ab825f967daa705bb4e048ac714f9de.gif'); /* 默认光标图片 */
  }
</style>

<div id="customCursor" class="custom-cursor"></div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const cursor = document.getElementById("customCursor");

    // 更新光标位置
    function updateCursor(event) {
      cursor.style.left = `${event.clientX}px`;
      cursor.style.top = `${event.clientY}px`;
    }

    // 初始化时设置自定义光标
    function resetCursor() {
      cursor.style.backgroundImage = `url('https://www.justnainai.com/uploads/default/original/3X/7/4/74fac9974ab825f967daa705bb4e048ac714f9de.gif')`;
    }

    // 默认光标动态跟随
    document.addEventListener("mousemove", updateCursor);

    // 页面加载时，重置光标
    window.addEventListener('load', resetCursor);

    // 页面卸载时重置光标
    window.addEventListener('beforeunload', resetCursor);

    // 如果需要在链接或输入框中改变光标动画，可以在这里处理：
    document.querySelectorAll("a, input, textarea").forEach(element => {
      element.addEventListener("mouseenter", () => {
        cursor.style.backgroundImage = `url('https://www.justnainai.com/uploads/default/original/3X/5/3/538b4a53d5bfbc33b628f6b5ce69f58b08e3ca5e.gif')`;
      });
      element.addEventListener("mouseleave", () => {
        resetCursor();
      });
    });
  });
</script>
3 Likes