jQuery實現元素根據視窗大小自適應效果

antzone發表於2017-03-18
jQuery

本章節介紹一下如何使得元素能夠自適應視窗的大小，也就是調節視窗大小的時候，能夠實現自適應效果，本章節就以div為例子看看如何實現此效果，這裡只是掩飾一下此功能的原理，比如div根本就不需要使用此功能就可以實現寬度自適應效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!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 事件一章節。

相關文章