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自适应www.linuxidc.com</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>
相关推荐
graseed 2020-10-28
zbkyumlei 2020-10-12
jinhao 2020-09-07
淡风wisdon大大 2020-06-06
yoohsummer 2020-06-01
baike 2020-05-19
hxmilyy 2020-05-11
小灰笔记 2020-03-16
jaybeat 2020-03-13
yinren 2020-03-11
86477414 2020-03-07
小飞侠V 2020-03-05
IT之家 2020-03-11
SXIAOYI 2020-09-16
impress 2020-08-26
liuqipao 2020-07-07
chenjia00 2020-05-29
扭来不叫牛奶 2020-05-08
黎豆子 2020-05-07