yangzailu

导航

jquery居中窗口-页面加载直接居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" type="text/css" href="" />
  <style type="text/css"></style>
  <script type="text/javascript" src="jquery-1.7.1.min.js "></script>
 </head>
 <body>
 <div id="pop" style="width:200px;height:100px;border:1px solid red;background-color:red;">
 我是测试文字
 </div>
<script type="text/javascript">
  showDiv($("#pop"));
function showDiv(obj){
 $(obj).show();
 center(obj);
 $(window).scroll(function(){
  center(obj);
 });
 $(window).resize(function(){
  center(obj);
 });
}

function center(obj){
 var windowWidth = document.documentElement.clientWidth;  
 var windowHeight = document.documentElement.clientHeight;  
 var popupHeight = $(obj).height();  
 var popupWidth = $(obj).width();   
 $(obj).css({  
  "position": "absolute",  
  "top": (windowHeight-popupHeight)/2+$(document).scrollTop(),  
  "left": (windowWidth-popupWidth)/2  
 }); 
}
</script>
 </body>
</html>

 

posted on 2017-02-27 15:38  飞离地平线  阅读(423)  评论(0编辑  收藏  举报