纯HTML无法实现广告随鼠标移动，必须用JavaScript监听mousemove/pointermove事件并动态更新位置；CSS仅负责定位与视觉优化，不参与坐标计算；应使用transform: translate()而非left/top以避免重排，配合position: fixed或absolute、pointer-events: none、防抖节流（推荐requestAnimationFrame）、移动端touchmove兼容、z-index与层叠上下文处理、overflow裁剪规避等细节保障稳定高性能。

纯 HTML 无法实现广告随鼠标移动，必须用 JavaScript 监听 mousemove 或 pointermove 事件，并动态更新元素位置；CSS 只负责定位方式和视觉优化，不参与坐标计算。

用 transform: translate() 更新位置最稳

直接改 left/top 会频繁触发重排，尤其在广告含文字或阴影时卡顿明显。改用 transform 走合成层，60fps 更可靠：

• 跟随元素必须设 position: fixed（全局跟随）或 position: absolute（局部容器内跟随）
• JS 中统一用 element.style.transform = `translate(${x}px, ${y}px)`，别混用 left
• 若想让广告中心对准鼠标，得提前减去自身宽高一半：translate(${e.clientX - w/2}px, ${e.clientY - h/2}px)
• 务必加 pointer-events: none 到广告元素上，否则它会拦截后续点击事件

防抖和节流不是可选项，是必选项

原生 mousemove 在桌面端每秒可触发 100+ 次，不做控制会导致样式更新队列堆积、视觉拖影、甚至页面假死：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 优先用 requestAnimationFrame 包裹更新逻辑，天然限帧率且与屏幕刷新同步
• 避免用 setTimeout 或 Lodash 的 throttle——它们无法保证执行时机，容易造成跳变
• 简单有效的方式：只在坐标变化 > 2px 时才更新，减少无效渲染
• 移动端不触发 mousemove，必须同时监听 touchmove 并取 e.touches[0].clientX

z-index 和容器 overflow 是隐藏杀手

广告“消失”或“被裁掉”，90% 出在这两处：

立即学习“前端免费学习笔记（深入）”；

• z-index 必须足够高（比如 9999），且父级不能有 transform、opacity 或 <code>filter 等创建新层叠上下文的属性，否则 z-index 失效
• 如果广告放在某个 overflow: hidden 容器里，又没给该容器加 position: relative，那广告会被硬裁剪——哪怕它用了 fixed
• 背景图类广告若用 background-position 实现位移，性能远不如 transform，低端机上明显卡顿

真正难的不是让广告动起来，而是它在缩放页面（Ctrl +）、高 DPR 屏幕、滚动中、触屏混合操作下都不偏移、不遮挡、不卡顿——这些细节不测真机根本发现不了。