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 获取LI里的内容
Dec 17 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
浅析Node.js查找字符串功能
Sep 03 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
php curl的深入解析
2013/06/02 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
React实现todolist功能
2020/12/28 Javascript
python实现跨文件全局变量的方法
2014/07/07 Python
跟老齐学Python之永远强大的函数
2014/09/14 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
pandas重新生成索引的方法
2018/11/06 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
小学校园文化建设汇报材料
2014/08/19 职场文书
返乡农民工证明
2015/06/24 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript
MySQL GTID复制的具体使用
2022/05/20 MySQL