jQuery將div在視窗中垂直居中例項程式碼

antzone發表於2017-03-02
jQuery

將一個元素在視窗中垂直居中是常有的操作，下面就以div為例介紹一下如何實現此操作。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#thediv
{
  width:100px;
  height:100px;
  background:red;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
(function($){
  $.fn.extend({
   center:function(){
     this.each(function(){
      var top=($(window).height()-$(this).outerHeight())/2;
      var left=($(window).width()-$(this).outerWidth())/2;
      $(this).css({position:'absolute',margin:0,top:(top >0?top:0)+'px',left:(left>0?left:0)+'px'});
     });
   }
}); 
})(jQuery);
$(document).ready(function(){
  $("#thediv").center()
})
</script> 
</head> 
<body> 
<div id="thediv"></div>
</body> 
</html>

以上程式碼實現了我們的要求，可以將div在視窗中是實現水平垂直居中效果，下面介紹一下實現過程。

一.實現原理:

原理特別的簡單，就是獲取視窗的尺寸和要居中元素的尺寸，然後將要居中的元素設定為絕對定位，然後將要居中元素的top和left屬性值分別設定為($(window).height()-$(this).outerHeight())/2和($(window).width()-$(this).outerWidth())/2，這樣就垂直居中了，可以參閱css實現div水平垂直居中程式碼一章節。具體可以參閱程式碼註釋。

二.程式碼註釋:

1.(function($){}(jQuery)，建立並執行一個匿名函式，引數jQuery物件。

2.$.fn.extend()，為jQuery新增一個例項物件。

3.center:function(){}，函式的名稱是center。

4.this.each(function(){})，以匹配元素集合的每一個元素作為上下文去執行函式，這裡的this是指向一個jquery物件。

5.var top=($(window).height()-$(this).outerHeight())/2，設定div的top屬性值，這裡的this指向dom元素div。

6.var left=($(window).width()-$(this).outerWidth())/2，設定div的left屬性值，這裡的this指向dom元素div。

7.$(this).css({position:'absolute',margin:0,top: (top >0?top:0)+'px',left: (left>0?left:0)+'px'})，通過css()函式將div設定為絕對定位，外邊距設定為0，然後再設定它的left和top屬性值。

相關文章