jQuery實現的div在視窗中垂直水平居中效果

admin發表於2017-03-10
jQuery

現在都講究對稱的美，所謂對稱那就是上下左右都是一樣的，所以現在得彈出視窗一般都講究上下左右垂直居中，下面就通過程式碼例項簡單介紹一下如何實現此效果，程式碼如下:

[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:80px;
  background-color:red;
  display:none;
}
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
function setDivCenter(divName){   
  var top=($(window).height()-$(divName).height())/2;   
  var left=($(window).width()-$(divName).width())/2;   
  var scrollTop=$(document).scrollTop();   
  var scrollLeft=$(document).scrollLeft();   
  $(divName).css({position:'absolute','top':top+scrollTop,left:left+scrollLeft}).show();  
}  
$(document).ready(function(){
  $("#bt").click(function(){
    setDivCenter("#thediv");
  })
})
</script> 
</head> 
<body> 
<div id="thediv"></div>
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

點選按鈕彈出的div層具有上下左右垂直居中效果，程式碼比較簡單這裡就不多介紹了。

相關閱讀:

1.height()函式可以參閱jQuery height()一章節。

2.width()函式可以參閱jQuery width()一章節。  

3.scrollTop()函式可以參閱jQuery scrollTop()一章節。 

4.scrollLeft()函式可以參閱jQuery scrollLeft()一章節。 

5.css()函式可以參閱jQuery css()一章節。 

相關文章