jQuery监听浏览器窗口大小的变化实例


Posted in Javascript onFebruary 07, 2017

方法一:在标签上加入  onLoad="" onResize=""  方法  写上对应的方法即可

方法二:window.onresize=function(){///.....} 在方法里面写上对应的代码即可

着两种方法基本都可以解决问题。

<script>
function adjust(obj){
  var div = document.getElementById("pad");
  var txt = document.getElementById("txt");
  var w = document.body.clientWidth;
  var h = document.body.clientHeight;
  div.style.width = w/3;
  div.style.height = h/3;
  txt.style.width = w/6;
  txt.style.height = h/6;
}
window.onload=function(){
 window.onresize = adjust;
 adjust();
}
</script>
<body style="margin:0px;height:0px;">
<div id="pad" style="background:red;zoom:1;margin:0px;height:0px;">
  <input type="text" id="txt">
</div>
</body>

以上这篇jQuery监听浏览器窗口大小的变化实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
前端常见跨域解决方案(全)
Sep 19 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
Bootstrap table表格简单操作
Feb 07 #Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 #Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 #Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 #Javascript
深入理解JavaScript中的for循环
Feb 07 #Javascript
vue实现ToDoList简单实例
Feb 07 #Javascript
js Canvas绘制圆形时钟教程
Feb 06 #Javascript
You might like
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Python单例模式的两种实现方法
2017/08/14 Python
使用python实现ANN
2017/12/20 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
python求质数列表的例子
2019/11/24 Python
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
介绍一下Mysql的存储引擎
2015/02/12 面试题
入党积极分子思想汇报
2014/01/02 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技