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 相关文章推荐
jQuery的运行机制和设计理念分析
Apr 05 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
vue中的计算属性和侦听属性
Nov 06 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
使用Cargo工具高效创建Rust项目
Aug 14 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
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
php源码的安装方法和实例
2019/09/26 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
javascript json2 使用方法
2010/03/16 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
JS实现简单打字测试
2020/06/24 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
python 导入数据及作图的实现
2019/12/03 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
大学生工作推荐信范文
2013/12/02 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
考试诚信承诺书
2014/05/23 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
领导班子整改方案
2014/10/25 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
资料员岗位职责
2015/02/10 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
初中军训感想
2015/08/07 职场文书
Python基本数据类型之字符串str
2021/07/21 Python