建筑公司网站功能表,wordpress 挣钱,网站统计付费,wordpress换模板 seo#x1f3af; 项目目标#xff1a;
当鼠标在页面移动时#xff0c;小圆点会跟随鼠标移动的位置#xff0c;带有平滑动画。
#x1f9e0; 实现思路#xff1a; HTML#xff1a; 页面内放一个 div 作为圆点。 CSS#xff1a; 圆点使用绝对定位#xff0c;初始在屏幕… 项目目标
当鼠标在页面移动时小圆点会跟随鼠标移动的位置带有平滑动画。 实现思路 HTML 页面内放一个 div 作为圆点。 CSS 圆点使用绝对定位初始在屏幕角落。 添加 transition让位置平滑过渡非瞬移。 设置宽高、颜色或图片样式。 JavaScript 监听 mousemove 事件。 在事件中获取鼠标 clientX/clientY。 设置圆点的位置为鼠标位置附近。 HTML 部分结构 div classdot/div
实践代码如下
初版JS一个圆点的效果
const dot document.getElementsByClassName(dot)document.addEventListener(mousemove, (event) {console.log(event.clientX);const x event.clientXconst y event.clientYdot[0].style.top ${y - 12.5}pxdot[0].style.left ${x -12.5}px
})
CSS
.dot {position: absolute;top: 0;left: 0;transition: all .2s ease;width: 25px;height: 25px;border-radius: 50%;background: yellowgreen;
} 进阶添加拖尾效果多个小点形成“尾巴”
JS多个圆点形成一个小尾巴的效果 const dots document.querySelectorAll(.dot)
let positions Array.from({ length: dots.length }, () ({ x: 0, y: 0 }));const NUM_DOTS 10
const SPACING 4 // 拖尾间隔越大越稀疏document.addEventListener(mousemove, (event) {const { clientX: x, clientY: y } event// 把当前位置放在队列前面positions.unshift({ x, y })positions.length dots.length// 每个圆点移动到对应的位置dots.forEach((dot, i) {dot.style.left positions[i].x pxdot.style.top positions[i].y pxdot.style.opacity 1 - i * 0.1dot.style.transform scale(${1 - i * 0.05})})
})
CSS
.dot {position: absolute;top: 0;left: 0;width: 25px;height: 25px;border-radius: 50%;background: yellowgreen;pointer-events: none;transition: top 0.2s, left 0.2s;
}
页面效果展示 额外知识记录
✅ 关于多个圆点形成小尾巴的实现思路
1. 每次鼠标移动时记录当前位置。 用 positions.unshift({ x, y }) 把当前坐标放进数组开头代表“最新”的位置。
2. 遍历每个圆点让它去“追赶”对应的历史鼠标位置。 第一个圆点移动到最新的位置 第二个圆点移动到稍早前的位置 依此类推制造出延迟感的拖尾效果。
✅ 关于为什么要给圆点加pointer-events: none;
作用让这个元素不响应鼠标事件。
你设置了 .dot 是鼠标指针跟随的小圆点如果不给它加 pointer-events: none你鼠标碰到它时就会“碰撞”上它即便你看不出来这样就会阻碍 mousemove 的监听。
1.为什么不加上 pointer-events: none会阻碍 mousemove 的监听
鼠标一旦停在 .dot 元素上
浏览器会把 mousemove 事件发送给 .dot 元素本身如果你并没有给 .dot 元素绑定 mousemove事件就“断了”document 上的回调不再触发拖尾停止更新看起来就像“卡住”。 总结 虽然你现在的代码运行良好肉眼可能看不出有什么卡顿但养成加上 pointer-events: none 的习惯是更稳妥的。 ✅ 关于const positions Array.from({ length: dots.length }, () ({ x: 0, y: 0 }))
1. dots.length 是多少
dots 是多个拖尾小圆点的 DOM 元素集合例如
const dots document.querySelectorAll(.dot);所以 dots.length 表示你想要多少个“尾巴”。 2. Array.from({ length: dots.length }, ...) 是什么
这是 Array.from 的一个常见用法语法是
Array.from({ length: N }, (value, index) ...)意思是创建一个长度为 N 的数组并用后面的函数生成每一项。 3. 为什么要写成 { length: dots.length }
因为 Array.from 的第一个参数可以是一个“类数组对象”只要有 .length 属性就行比如
Array.from({ length: 3 }) → [undefined, undefined, undefined]4. 回调函数 () ({ x: 0, y: 0 }) 是干嘛的
这个函数的作用是为数组中的每一项都返回一个初始坐标对象 { x: 0, y: 0 }。
也就是说
Array.from({ length: 3 }, () ({ x: 0, y: 0 }));
// 结果是
[{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 }
]5. 为什么这么写有必要
这个 positions 数组的作用是
记录每一个尾巴圆点当前的位置。后续我们会用它来移动 .dot 的位置实现拖尾轨迹。如果你有 10 个小圆点就需要一个 10 项的数组每一项都记录这个圆点的位置。 总结 这行代码的含义就是 “为每个 .dot 小圆点初始化一个位置对象 { x: 0, y: 0 }构成一个统一的 positions 数组用于后续跟随鼠标拖尾。” ✅ 关于dot.style.opacity 1 - i * 0.1dot.style.transform scale(${1 - i * 0.05})
这是给拖尾点添加视觉渐变和缩放的效果 opacity 1 - i * 0.1 第 0 个点透明度是 1完全不透明 第 1 个点是 0.9 第 2 个点是 0.8... 后面的点越来越透明 scale 1 - i * 0.05 第 0 个点大小是 1原始大小 第 1 个点是 0.95 第 2 个点是 0.90... 后面的点越来越小 总结 就是“实现前面圆点大且亮后面越来越小、越来越淡的尾巴效果。”
