jQuery使容器自适应浏览器窗口


一、几个关键点

      1：当文档大小改变时可以通过哪个事件来触发？

           resize([Data], fn) 可传入data供函数fn处理。

          示例：       

 
  1. $(window).resize(function(){  
  2.   alert("Stop it!");  
  3. });  

 

       2：怎样获得浏览器窗口的宽度高度？    

           获取当前浏览器窗口的宽度

 
  1. $(window).width();  
     
          获取第一段的宽
  1. $("p").width()  
   
    获取当前HTML文档宽度
 $(document).width();

       3：怎样赋值？

           方法很多，可以通过css（...）、width(...)等

 

二、举个例子

  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  4. <title>jquery自适应www.bkjia.com</title>  
  5. </head>  
  6. <script type="text/javascript" src="jquery-1.7.1.min.js"></script>  
  7. <script>  
  8. $(document).ready(function(){  
  9.     //初始化宽度、高度  
  10.     $("#div1").width($(window).width());  
  11.     $("#div1").height($(window).height());  
  12.     //当文档窗口发生改变时 触发  
  13.     $(window).resize(function(){  
  14.         $("#div1").width($(window).width());  
  15.         $("#div1").height($(window).height());  
  16.     })  
  17.     })  
  18. </script>  
  19. <body style="margin:0;">  
  20.     <div id="div1" style="background:#09F">  
  21.         这是一个可以自适应窗口的DIV  
  22.     </div>  
  23. </body>  
  24. </html>  

相关内容