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 相关文章推荐
Web开发之JavaScript
Mar 29 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
Javascript创建类和对象详解
May 31 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
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文档更新介绍
2011/07/22 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
Javascript的闭包详解
2014/12/26 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
Python和Sublime整合过程图示
2019/12/25 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
工作的心得体会
2013/12/31 职场文书
会计岗位职责
2015/02/03 职场文书
公司放假通知怎么写
2015/04/15 职场文书
小学班主任培训心得体会
2016/01/07 职场文书