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>  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM