本文通过使用jQuery实现了一个自适应布局的DIV元素，演示了如何根据浏览器窗口大小动态调整元素尺寸，包括如何获取窗口宽度和高度，以及如何响应窗口尺寸变化事件。
一、几个关键点
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>
扫一扫
94
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
