// 获取鼠标跟随的元素
const cursorFollower = document.createElement('div');
cursorFollower.id = 'cursor-follower';
cursorFollower.style.position = 'fixed';
cursorFollower.style.pointerEvents = 'none'; // 避免干扰其他元素的点击事件
cursorFollower.style.width = '20px';
cursorFollower.style.height = '20px';
cursorFollower.style.borderRadius = '50%';
cursorFollower.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // 设置颜色和透明度
cursorFollower.style.transform = 'translate(-50%, -50%)'; // 使中心点作为定位基准
document.body.appendChild(cursorFollower);
// 添加鼠标移动事件监听器
document.addEventListener('mousemove', (e) => {
const x = e.clientX;
const y = e.clientY;
// 更新跟随元素的位置
cursorFollower.style.left = x + 'px';
cursorFollower.style.top = y + 'px';
});
// 可选：添加一些额外的样式和动画效果
// 1. 添加过渡效果，使移动更平滑
cursorFollower.style.transition = 'all 0.1s ease';
// 2. 根据鼠标速度改变大小
document.addEventListener('mousemove', (e) => {
let speed = Math.sqrt(e.movementX ** 2 + e.movementY ** 2);
let size = Math.max(10, 30 - speed / 3); // 限制大小范围
cursorFollower.style.width = size + 'px';
cursorFollower.style.height = size + 'px';
});
// 3. 鼠标悬停在特定元素上时改变样式
const elementsToHighlight = document.querySelectorAll('a, button'); // 选择要高亮的元素
elementsToHighlight.forEach(element => {
element.addEventListener('mouseover', () => {
cursorFollower.style.backgroundColor = 'rgba(255, 0, 0, 0.5)'; // 例如，改为红色
cursorFollower.style.transform = 'translate(-50%, -50%) scale(1.5)'; // 放大
});
element.addEventListener('mouseout', () => {
cursorFollower.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // 恢复默认颜色
cursorFollower.style.transform = 'translate(-50%, -50%) scale(1)'; // 恢复大小
});
});
使用方法：
- 将这段代码复制到你的 HTML 文件的
<head>或<body>部分（最好放在<body>的末尾）。 - 根据需要修改样式，例如
backgroundColor、width、height等。 - 对于更高级的动画效果，可以考虑使用 CSS 动画或 JavaScript 动画库，例如 GSAP。
代码解释：
- 创建跟随元素: 创建了一个
div元素，并设置其样式，使其成为一个圆形。pointerEvents: 'none'很重要，它可以防止跟随元素阻挡鼠标点击其他元素。 - 添加鼠标移动事件监听器: 监听
mousemove事件，获取鼠标的x和y坐标。 - 更新跟随元素位置: 将鼠标的坐标赋值给跟随元素的
left和top样式，实现跟随效果。 - 可选的增强效果: 代码中注释部分提供了一些额外的样式和动画效果，例如过渡、根据鼠标速度改变大小、鼠标悬停在特定元素上时改变样式等。
这段代码提供了一个基本的鼠标跟随效果，并包含了一些常见的增强功能。你可以根据自己的需求进行修改和扩展。
标签：特效,cursorFollower,元素,鼠标,50%,style,跟随 From： https://www.cnblogs.com/ai888/p/18593092