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

更新时间：2017年02月07日 09:24:25 投稿：jingxian

下面小编就为大家带来一篇jQuery监听浏览器窗口大小的变化实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

方法一：在标签上加入 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监听浏览器窗口大小的变化实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

uploadify 3.0 详细使用说明
uploadify 3.0 详细使用说明,需要的朋友可以参考下
2012-06-06
基于$.ajax()方法从服务器获取json数据的几种方式总结
下面小编就为大家分享一篇基于$.ajax()方法从服务器获取json数据的几种方式总结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
jquery学习总结（超级详细）
本文仅针对jquery的部分知识点做总结，更为全面的可以去官网看中文文档。可以更为详细的了解jquery及其特性。
2014-09-09
jQuery鼠标事件汇总
鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的语法和用法
2015-08-08
jQuery实现适用于移动端的跑马灯抽奖特效示例
这篇文章主要介绍了jQuery实现适用于移动端的跑马灯抽奖特效,结合实例形式分析了jQuery结合时间函数动态操作页面元素实现的跑马灯抽奖功能相关操作技巧,需要的朋友可以参考下
2019-01-01
jQuery使用hide方法隐藏页面上指定元素的方法
这篇文章主要介绍了jQuery使用hide方法隐藏页面上指定元素的方法,涉及jQuery使用hide隐藏元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
JS拖动选择table里的单元格完整实例【基于jQuery】
这篇文章主要介绍了JS拖动选择table里的单元格,结合完整实例形式分析了基于jQuery的table表格动态操作相关实现技巧,涉及事件响应及页面元素属性动态操作使用方法,需要的朋友可以参考下
2019-05-05
jQuery 实现自动填充邮箱功能（带下拉提示）
本文用 jQuery 实现一个用户输入字符时出现能够提示邮箱后缀名的下拉菜单，并且在选择下拉菜单中的邮箱后缀名后可自动填充未完成的输入框。
2014-10-10
jquery实现简单的无缝滚动
这里给大家分享的是使用jQuery实现简单的无缝滚动的效果，其思路是我们通过js控制 ul 标签的margin 来实现滚动。横向滚动则是控制 margin-left ; 纵向滚动则是控制 margin-top;，有需要的小伙伴可以参考下。
2015-04-04
jQuery+HTML5实现弹出创意搜索框层
本文主要分享了jQuery+HTML5弹出创意搜索框层的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧
2016-12-12