网页飞出窗口自动消失特效源码
需积分: 7 20 浏览量
更新于2024-09-13
收藏 2KB TXT 举报
"飞来窗口关闭源代码是一个用于创建网页元素动态飞出并自动消失的JavaScript程序,适用于网站通告或类似功能的实现。这个程序包括HTML结构和JavaScript脚本,可以自定义窗口尺寸、位置以及动画速度。"
该程序的核心在于JavaScript部分,它通过变量控制窗口的移动和消失效果。以下是对主要知识点的详细说明:
1. **绝对定位**:在HTML部分,`position:absolute` 属性被用于 `div` 元素,这使得它可以脱离文档流并根据相对于最近的非 static 定位祖先元素进行定位,如果没有这样的祖先,则相对于初始包含块(通常是浏览器窗口)定位。
2. **JavaScript 变量**:
- `ad_w` 和 `ad_h` 分别表示窗口的宽度和高度。
- `ad_l` 和 `ad_t` 初始化窗口在屏幕中的初始左边界和顶部距离,它们通过计算当前页面的宽度和高度来居中显示窗口。
- `ad_ft` 是动画时间(以秒为单位),`ad_step` 是每个时间步长窗口移动的距离(像素)。
- `ad_time` 是整个动画持续的时间(秒)。
- `ad_t1` 是每个时间步长对应的毫秒数。
- `ad_t2`、`ad_t3`、`ad_t4`、`ad_t5` 和 `ad_t6` 用于跟踪窗口的位置和动画状态。
3. **JavaScript 动画**:
- `flashad()` 函数是动画的主要控制者,它会定期执行以更新窗口的位置。如果窗口到达边界,它会改变移动方向或者隐藏窗口。
- 使用 `setTimeout()` 和 `clearTimeout()` 来实现定时执行动画和停止动画。
- `ad_t2+=ad_t3;` 这一行代码使窗口向右移动,当达到边界条件时,会触发窗口的回弹或消失。
4. **事件处理**:`onclick` 属性绑定了一个点击事件,当用户点击按钮时,窗口的动画参数会变化,从而改变窗口的移动速度和路径。
5. **样式控制**:HTML 结构中的 `style` 属性用于设置元素的外观,如边框、填充、颜色等。
6. **链接和图像**:`<a>` 和 `<img>` 标签用于添加链接和显示图片,它们与飞来窗口效果一起工作,提供实际的内容展示。
7. **跨域安全**:在实际应用中,确保图片和链接的来源(如 `http://www.qpsh.com`)符合同源策略,避免跨域问题。
通过这个飞来窗口程序,开发者可以轻松地为网站添加动态通知或广告效果,同时也可以作为学习JavaScript动画和交互的一个实例。
2020-07-23 上传
138 浏览量
2021-03-15 上传
153 浏览量
2022-05-16 上传
2022-05-16 上传
beifang002
- 粉丝: 0
- 资源: 1
最新资源
- mapgis组件开发
- wireshark编译指南
- AIR教程-AIR教程
- 最新EJB 3.0实例教程
- 3天学透ActionScript
- Python 中文手册 v2.4
- 酒店管理系统--论文、说明书、数据库设计
- 防范企业数据泄密的六项措施.doc
- Ext2 核心 API 中文详解.pdf
- Estimation of the Bit Error Rate for Direct-Detected OFDM system
- Oracle+9i&10g编程艺术:深入数据库体系结构.pdf
- AIX 傻瓜教程UNIX
- 2008微思网络CCNP(BSCI)实验手册
- 《Full Circle》中文版第十二期
- SQL Server 2008基础知识
- 中国电信统一视图规范