JavaScript鼠标吐泡泡特效
吐泡泡效果的鼠标跟随特效，用起来还挺有意思的。页面上鼠标一动，气泡就像追着它一样往上飘，看着就挺治愈的。这种效果虽然不复杂，但挺有氛围感，拿来做一些节日活动、儿童类网站或者 404 页面，气氛一下就有了。
核心代码写得也蛮清爽的，主要靠监听onmousemove事件拿到鼠标位置，用一堆div配合CSS 绝对定位和JavaScript 的定时器来控制这些气泡的移动和变化。
像变量Amount控制气泡数量，Xmouse、Ymouse实时记录鼠标位置，Speed和grow之类的值负责模拟气泡的上升速度和大小变化。每个气泡的行为都是随机的，所以效果不会死板，看着还蛮灵动的。
动画部分主要靠一个名叫MouseBubbles的函数，它每隔 10 毫秒就更新一遍所有气泡的状态，位置、大小都重新计算，配上sin和cos让运动路径不那么直，动感也更自然。
代码比较适合放在活动页、官网的小彩蛋或者鼠标互动区，能提升一点点趣味性。如果你还没试过这种特效，可以把它嵌到自己的index.html里玩一玩，响应也快，浏览器兼容性也不错。
顺带，如果你对鼠标事件还不是熟，可以看看《JavaScript 鼠标事件详解》，把事件这块搞懂了，再玩类似的互动效果就轻松多了。
文件大小：22.5KB
评论区