JS实现悬浮移动窗口(悬浮广告)的特效

基于给定文件内容，我们能提取出以下知识点，它们涵盖了如何使用JavaScript和jQuery实现一个悬浮移动窗口特效，具体为悬浮广告形式。 1. **页面加载完成后操作：** 使用`window.onload`函数，可以确保在页面加载完毕后执行特定的JavaScript代码。这是实现页面级任务初始化的重要技术点，其中`document.createElement`用于动态创建HTML元素，如本例中的`div`元素。 2. **动态创建DOM元素：** 在`window.onload`函数中，首先使用`document.createElement`创建了一个`div`元素，并用`setAttribute`方法设置了样式属性，使该`div`成为一个悬浮窗口。通过`document.body.appendChild`方法，将创建的`div`元素添加到页面的body部分中。这展示了如何在页面加载完成后动态向文档中添加内容。 3. **CSS样式的动态应用：** 创建元素后，利用`setAttribute`方法动态应用了多个CSS样式属性（如`background`, `position`, `cursor`等），这些样式定义了悬浮窗口的外观和布局特性。例如，`position`属性被设置为`absolute`，使得这个元素可以脱离常规文档流，进行自由定位。 4. **定时器函数setInterval：** `setInterval`函数用于周期性执行动作，此处是每100毫秒触发一次`moves`函数。`moves`函数中的逻辑负责移动悬浮窗口的位置，当窗口触碰到页面边缘时改变移动方向。这是实现悬浮窗口动画移动的关键技术。 5. **事件处理：** 文档还展示了如何使用事件监听和处理来增强悬浮窗口的交互性。`onmouseover`事件使得当鼠标悬停在悬浮窗口上时，通过`clearInterval`停止窗口移动；而`onmouseout`事件则在鼠标离开窗口后使窗口恢复移动。此外，关闭按钮的`onclick`事件用于移除悬浮窗口，其利用`document.body.removeChild`方法实现。 6. **jQuery的使用：** 文件还提供了一个使用jQuery实现相似功能的示例。通过`$`符号和`<script>`标签引入jQuery库，简化了DOM操作和事件绑定。通过`$('<div/>')`创建元素，并直接通过`.css()`方法设置其样式，然后使用`.appendTo()`将元素添加到页面的body中。jQuery的链式调用使得代码更加简洁易读。 7. **跨浏览器兼容性考虑：** 示例代码中也体现了对不同浏览器的兼容性处理。例如，通过检查`oneButton.style.cssFloat`是否存在来决定使用`cssFloat`还是`styleFloat`属性，这旨在解决不同浏览器间CSS属性名的差异问题。 通过以上知识点，开发者可以掌握如何使用JavaScript和jQuery来创建动态和交互式的悬浮窗口特效，此类特效常见于网页上实现广告展示、通知提醒等场景。掌握这些技术点，对于提升前端开发者的技能水平非常有帮助。