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 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 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
我的论坛源代码(五)
2006/10/09 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python制作刷网页流量工具
2017/04/23 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
python 美化输出信息的实例
2018/10/15 Python
Python异常处理知识点总结
2019/02/18 Python
如何在python中写hive脚本
2019/11/08 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
2016年学校招生广告语
2016/01/28 职场文书
手残删除python之后的补救方法
2021/06/26 Python