使用phuocng/html-dom项目创建自定义光标效果

使用phuocng/html-dom项目创建自定义光标效果

html-dom Common tasks of managing HTML DOM with vanilla JavaScript. Give me 1 ⭐if it’s useful. 项目地址: https://gitcode.com/gh_mirrors/ht/html-dom

前言

在现代网页设计中，自定义光标已经成为提升用户体验和网站个性的重要元素。本文将详细介绍如何使用JavaScript和CSS创建一个功能丰富的自定义光标系统，包括基础实现、交互效果以及动态元素处理等高级功能。

基础实现

隐藏默认光标

首先需要隐藏浏览器默认的光标：

html {
    cursor: none;
}

或者使用JavaScript动态设置：

document.documentElement.style.cursor = 'none';

创建自定义光标元素

创建一个div元素作为自定义光标的容器：

const cursorEle = document.createElement('div');
cursorEle.classList.add('cursor');
document.body.appendChild(cursorEle);

对应的CSS样式：

.cursor {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 0.75rem;
    height: 0.75rem;
    background: rgb(100 116 139);
    border-radius: 50%;
    pointer-events: none;
}

关键点说明：

• position: fixed确保光标不会随页面滚动而移动
• transform: translate(-50%, -50%)使光标中心对准鼠标位置
• pointer-events: none防止光标元素拦截鼠标事件

跟踪鼠标移动

通过监听mousemove事件更新光标位置：

document.addEventListener('mousemove', (e) => {
    cursorEle.style.top = `${e.clientY}px`;
    cursorEle.style.left = `${e.clientX}px`;
});

交互效果增强

悬停状态变化

为链接和按钮添加悬停效果：

const updateCursorOnHover = (ele) => {
    ele.addEventListener('mouseover', () => {
        cursorEle.classList.add('cursor--hover');
    });
    ele.addEventListener('mouseout', () => {
        cursorEle.classList.remove('cursor--hover');
    });
};

document.querySelectorAll('a, button').forEach(updateCursorOnHover);

悬停状态的CSS样式：

.cursor--hover {
    mix-blend-mode: difference;
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(3);
    transition: transform .3s ease-in-out;
}

点击效果

添加点击时的动画效果：

document.addEventListener('click', (e) => {
    const clickedCursor = document.createElement('div');
    clickedCursor.classList.add('cursor--click');
    clickedCursor.style.top = `${e.clientY}px`;
    clickedCursor.style.left = `${e.clientX}px`;
    
    document.body.appendChild(clickedCursor);
    
    clickedCursor.addEventListener('animationend', () => {
        clickedCursor.remove();
    });
});

点击动画的CSS定义：

.cursor--click {
    /* 基本定位样式 */
    width: 1rem;
    height: 1rem;
    border: 1px solid rgb(100 116 139);
    animation: pulse .8s ease-in-out;
}

@keyframes pulse {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(3);
    }
}

处理动态元素

对于动态添加的元素，使用MutationObserver监听DOM变化：

const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach((node) => {
                if (node.nodeName === 'A' || node.nodeName === 'BUTTON') {
                    updateCursorOnHover(node);
                }
            });
        }
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true
});

性能优化建议

1. 减少重绘：使用transform而不是直接修改top/left属性
2. 事件委托：对大量相似元素使用事件委托而非单独监听
3. 硬件加速：为动画元素添加will-change: transform
4. 节流处理：对mousemove事件进行节流处理

扩展思路

1. 主题化光标：根据网站主题切换不同风格的光标
2. 状态指示：通过光标变化反映系统状态（如加载中）
3. 游戏化交互：为光标添加拖尾效果或粒子动画
4. 无障碍优化：为需要禁用自定义光标的用户提供选项

总结

通过本文介绍的方法，开发者可以创建出既美观又实用的自定义光标效果。从基础实现到高级交互，再到动态元素处理，这套方案提供了完整的自定义光标解决方案。在实际项目中，可以根据具体需求调整样式和交互效果，打造独特的用户体验。

记住，虽然自定义光标能增强网站的视觉吸引力，但应始终确保它不会影响网站的可操作性和无障碍访问性。适度的动画和效果往往比过度设计更能提升用户体验。

html-dom Common tasks of managing HTML DOM with vanilla JavaScript. Give me 1 ⭐if it’s useful. 项目地址: https://gitcode.com/gh_mirrors/ht/html-dom