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 相关文章推荐
javascript中字符串拼接需注意的问题
Jul 13 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
分享PHP header函数使用教程
2013/09/05 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
js 函数调用模式小结
2011/12/26 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
mac系统安装Python3初体验
2018/01/02 Python
用Python shell简化开发
2018/08/08 Python
python调用java的jar包方法
2018/12/15 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
pytorch 修改预训练model实例
2020/01/18 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
Python如何在bool函数中取值
2020/09/21 Python
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
摄影展策划方案
2014/06/02 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python