Jquery使容器自适应浏览器窗口
一、几个关键点
1：当文档大小改变时可以通过哪个事件来触发？
resize([Data], fn) 可传入data供函数fn处理。
示例：
$(window).resize(function(){
alert("Stop it!");
});
2：怎样获得浏览器窗口的宽度高度？
获取当前浏览器窗口的宽度
$(window).width();
获取第一段的宽
$("p").width()
获取当前HTML文档宽度
$(document).width();
3：怎样赋值？
方法很多，可以通过css（...）、width(...)等
二、举个例子
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery自适应demo</title>
</head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
//初始化宽度、高度
$("#div1").width($(window).width());
$("#div1").height($(window).height());
//当文档窗口发生改变时 触发
$(window).resize(function(){
$("#div1").width($(window).width());
$("#div1").height($(window).height());
})
})
</script>
<body style="margin:0;">
<div id="div1" style="background:#09F">
这是一个可以自适应窗口的DIV
</div>
</body>
</html>
Jquery使容器自适应浏览器窗口的更多相关文章
- jquery和js检测浏览器窗口尺寸和分辨率
jquery和js检测浏览器窗口尺寸和分辨率,转载自网络,记录备忘 <script type="text/javascript">$(document).ready(f ...
- 让div自适应浏览器窗口居中显示
今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1& ...
- echarts图表自适应浏览器窗口的大小
echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 window.onresize = funct ...
- jQuery easyui layout布局自适应浏览器大小(转)
首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...
- JQuery iframe宽高度自适应浏览器窗口大小的解决方法
iframe宽高度自适应浏览器窗口大小的解决方法 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...
- JQuery 获取元素到浏览器可视窗口边缘的距离
获取元素到浏览器可视窗口边缘的距离 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com/ishouke/ ...
- 使用jQuery和Bootstrap实现多层、自适应模态窗口
本篇实践一个多层模态窗口,而且是自适应的. 点击页面上的一个按钮,弹出第一层自适应模态窗口. 在第一层模态窗口内包含一个按钮,点击该按钮弹出第二层模态窗口,弹出的第二层模态窗口会挡住第一层模态窗口,即 ...
- js使浏览器窗口最大化（适用于IE的方法）
这里使用的方法是IE的私有特性,只能在IE中有效.主要是window.moveTo和 window.resizeTo方法. 效果和点击最大化按钮差不多,有一点区别.点击最大化按钮后,浏览器 ...
随机推荐
- matlab mex中C++内存全局共享和持久化
为提高matlab程序运行速度,经常将核心程序编写为mex动态链接库: 然而,经常情况下,在mex函数中分配的内存或句柄希望在mex函数调用完成后在后续函数调用中能够共享而不被释放,本程序方法为解决该 ...
- 【资料】wod属性
各个属性的影响力量 st 影响近战远程伤害和体力体质 co 影响体力(比力量的影响大)智力 in 影响法力和魔法防御灵巧 dx 影响近战远程命中和近战躲闪魅力 ch 影响诅咒和治愈能力,诅咒攻击命中和 ...
- google支付回调验证
原文链接: https://my.oschina.net/lemonzone2010/blog/398736 Google支付问题 20150218,挂机的日本服务器出现google支付被刷单现象,虽 ...
- 【spring data jpa】jpa中criteria拼接in查询
示例代码: public static Specification<GoodsType> where(final GoodsType goodsType){ return new Spec ...
- s:iterator循环输出数字
1.在action里加上maxNum属性,GET SET方法2.第一种写法(推荐) <s:iterator value="new int[maxNum]" status=&q ...
- android基础知识普及
1.密度问题及相互转换 测试机 philips w732 480X800 density 1.5 scaledDensity 1.6500001 通过 context.getResources().g ...
- thinkphp5(tp5)中success跳转页面和弹窗问题解决
自己做了一个form页面,对其操作后,根据$this->success('提示信息',''),执行后是通过笑脸页面跳转,而不是在本页弹框后刷新.源码里带的原来的例子是弹出框刷新,为什么我自己做的 ...
- Python学习（四）数据结构 —— int float
Python 数字类型 int float 数字常量 int: 一般的整数, long: 长整型,2.x版本需在数字后加 “L” 或 “l” ,表示长整型 如 100000000L: python ...
- nose的测试报告
有时候我们要让报告整洁美观点,以html展示测试结果,我们可以借助pip install nosehtmloutput插件输出html格式报告 from nose.plugins.plugintest ...
- iOS:多个单元格的删除(方法二):
前面介绍了万无一失的方法一,这里介绍删除单元格的第二种方式,通过删除单元格中的内容的方式进行操作:(但是这种情况有一个小的弊端,由于单元格重用机制,如果单元格内容一样时,标记的存在会造成误删) 删除前 ...