首页 > 编程笔记 > JavaScript笔记
阅读:52
JS resize事件:窗口重置
在 JavaScript 中,resize 事件是在浏览器窗口被重置时触发的,如当用户调整窗口大小,或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。利用该事件可以跟踪窗口大小的变化以便动态调整页面元素的显示大小。
示例
下面的示例能够根据跟踪窗口大小变化及时调整页面内红色盒子的大小,使其始终保持与窗口固定比例的大小显示。<div id="box"></div> <script> var box = document.getElementById("box"); //获取盒子的指针引用 box.style.position = "absolute"; //绝对定位 box.style.backgroundColor = "red"; //背景色 box.style.width = w() * 0.8 + "px"; //设置盒子宽度为窗口宽度的0.8倍 box.style.height = h() * 0.8 + "px"; //设置盒子高度为窗口高度的0.8倍 window.onresize = function () { //注册事件处理函数,动态调整盒子大小 box.style.width = w() * 0.8 + "px"; box.style.height = h() * 0.8 + "px"; } function w () { //获取窗口宽度 if (window.innerWidth) { //兼容DOM return window.innerWidth; else if ((document.body) && (document.body.clientWidth)) //兼容IE return document.body.clientWidth; } function h () { //获取窗口高度 if (window.innerHeight) { //兼容DOM return window.innerHeight; else if ((document.body) && (document.body.clientHeight)) //兼容IE return document.body.clientHeight; } </script>
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频