jQuery实现元素根据窗口大小自适应效果:
本章节介绍一下如何使得元素能够自适应窗口的大小,也就是调节窗口大小的时候,能够实现自适应效果,本章节就以div为例子看看如何实现此效果,这里只是掩饰一下此功能的原理,比如div根本就不需要使用此功能就可以实现宽度自适应效果。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> .show{ width:500px; height:50px; background-color:red; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ var browser_width=$(document.body).width(); $("div.show").css("width",browser_width); $(window).resize(function(){ browser_width=$(document.body).width(); $("div.show").css("width",browser_width); }); }) </script> </head> <body> <div class="show"></div> </html>
上面的代码实现了宽度自适应效果,下面介绍一下它的实现过程。
一.代码注释:
1.$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
2.var browser_width=$(document.body).width(),获取页面的宽度尺寸。
3.$("div.show").css("width",browser_width),将div的宽度设置为这个尺寸。
4.$(window).resize(function(){}),为窗口注册resize事件处理函数。
5.browser_width=$(document.body).width(),再一次获取页面的宽度。
6.$("div.show").css("width",browser_width),设置div的宽度。
二.相关阅读:
1.width()函数可以参阅jQuery的width()方法一章节。
2.css()函数可以参阅jQuery的css()方法一章节。
3.resize事件可以参阅jQuery的resize事件一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14269
更多内容可以参阅:http://www.softwhy.com/jquery/