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方法. 效果和点击最大化按钮差不多,有一点区别.点击最大化按钮后,浏览器 ...
随机推荐
- JavaScript的最大函数參数长度和最大栈深度检測
一般代码也许不会涉及最大參数长度和最大栈深度,但某些特殊场合,检測这两个參数还是有必要的.比如:用递归计算斐波那契数列的第n个值,不了解最大栈深度,难免显得肤浅.又比如:将一串charCode转成St ...
- API & HTTP 请求调试：Postman
参考: Postman 是一个非常棒的Chrome扩展,提供功能强大的API & HTTP 请求调试. 它能够发送任何类型的HTTP requests (GET, HEAD, POST, PU ...
- WebView 加载网页和java 与js交互
[mw_shl_code=java,true]WebView是一个可以显示网页的控件.需求:通过WebView加载assets下的html文件.实现页面的缩放.向menu键添加:前进.后退和刷新,实现 ...
- 搭建简单Ext
一.EXT是什么? 1. Ext是一个Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b/s应用更加具有活力及生命力,提高用户体验: 2. Ext是一个用javascript编写,与后 ...
- 【redis】spring boot中 使用redis hash 操作 --- 之 使用redis实现库存的并发有序操作
示例: @Autowired StringRedisTemplate redisTemplate; @Override public void dealRedis(Dealer dealer) { d ...
- 关于Go语言,自己定义结构体标签的一个妙用.
在Go中首字母大写和小写,决定着这此变量能否被外部调用, 比如:在使用标准库的json编码自定一的结构的时候: <pre style="margin-top: 0px; margin- ...
- EntityFramework：迁移工具入门
背景 刚毕业做项目的时候,没有用“迁移”这个概念,系统发布和更新的过程让人非常痛苦,在学习 Ruby On Rails 的过程解除了“迁移”,以后的所有项目都会先确定好“迁移”的方案,本文介绍一下En ...
- MySQL -- 调优
多数时候数据库会成为整个系统的瓶颈,比如大的数据量的插入与修改,频繁的亦或是高流量的访问,都会对数据库系统带来很大的压力.我在平时工作的时候,总是会遇到大数据量的插入.修改或是查询的操作,所以在工作的 ...
- Python学习 —— 阶段综合练习一
Python 阶段综合练习一 综合之前的函数.数据结构.流程控制等,做以下实例练习:(建议先不要看代码,自己先试着写:代码仅供参考,有多种实现方法) 1. 定义 is_Even 函数,传一 int 参 ...
- [置顶] CSS语言精粹
本文主要是对CSS中一些比较重要的高级部分作了一些整理,这些内容也许不是经常使用,但是都很强大.本文将长期更新. 边框 CSS2.1 规定:元素的背景是内容.内边距和边框区的背景.设置背景颜色时是没有 ...