JS获取窗口中间坐标


<body> 
<div id="ss" style="height:200px; width:200px; background-color:#FF0000; position:absolute;z-index:2;"> </div> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
</body> 
<script> 
var div  = document.getElementById("ss") 
var top  = (document.body.clientHeight-div.offsetHeight)/2 
var left = (document.body.clientWidth-div.offsetWidth)/2 
var obj = document.getElementById("ss"); 
function change() 
{  
  //div.style.left=(document.body.clientWidth-div.offsetWidth)/2 
  //div.style.top =(document.body.clientHeight-div.offsetHeight)/2+document.body.scrollTop 
  top = (document.body.clientHeight-div.offsetHeight)/2 
  left = (document.body.clientWidth-div.offsetWidth)/2 
  div.style.left = left + "px"; 
  div.style.top = top + "px"; 
  obj.innerHTML = top + " <br/>"; 
  obj.innerHTML += left;  
} 
change();
window.onresize=change 
window.onscroll=function(){div.style.top=top+document.body.scrollTop} 
</script>

解决方案 »

  1.   


    <div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; 
    z-index: 2; left: 0px; display: none;"> 
    </div>
    <div id="Layer2" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-400)/2); top: expression((document.body.offsetHeight-170)/2); 
    background-color: #fff; display: none;" > 
    <table width="400" border="0" cellpadding="0" cellspacing="0" style="border: 0  solid  #e7e3e7; 
    border-collapse: collapse"> 
    <tr> <td height="130" align="center">Text
    </td> 
    </tr> 
    </table> 
    </div><script language=javascript>
    function  locking()
    {  
    document.all.ly.style.display="block";  
    document.all.ly.style.width=document.body.clientWidth;  
    document.all.ly.style.height=document.body.clientHeight;  
    document.all.Layer2.style.display='block';  
    }  
    </script>
    <script language=javascript defer>
    locking();
    </script>
      

  2.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    #divTest{
    background:#F1F1F1; border:1px solid #006699; height:100px; width:100px;
    }
    </style>
    <script type="text/javascript">
    function move(){
    var obj = document.getElementById("divTest");
    obj.style.display = "";

    var clientWidth = document.documentElement.clientWidth;
    var clientHeight = document.documentElement.clientHeight;
    var objWidth = obj.offsetWidth;
    var objHeight = obj.offsetHeight;
    var x = ( clientWidth - objWidth ) / 2;
    var y = ( clientHeight - objHeight ) / 2;

    obj.style.position = "absolute";
    obj.style.left = x + "px";
    obj.style.top = y + "px";
    }
    </script>
    </head><body>
    <input type="button" value="测试" onclick="move()" />
    <div id="divTest" style="display:none">
    测试内容
    </div>
    </body>
    </html>
      

  3.   

    <div id="box" style="width:100%"><div>test</div></div>
    <body><div id="ss" style="height:200px; width:200px; background-color:#FF0000; position:absolute"></div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></body>
    <script>
    var isIE = (document.all) ? true : false
    var div  = document.getElementById("ss")
    var top  = (document.body.clientHeight-div.offsetHeight)/2
    var left = (document.body.clientWidth-div.offsetWidth)/2
    function change()
    {  
       div.style.left=(document.body.clientWidth-div.offsetWidth)/2
       div.style.top =(document.body.clientHeight-div.offsetHeight)/2+document.body.scrollTop
       top = (document.body.clientHeight-div.offsetHeight)/2
       left = (document.body.clientWidth-div.offsetWidth)/2
    }
    change()
    var oContainer = document.getElementById("box");
    if(isIE){
        oContainer.onresize=change
    }else{
        window.onresize=change
    }window.onscroll=function(){div.style.top=top+document.body.scrollTop}
    </script>
      

  4.   

    function bl2(title)
    {
        s=title;
        div2.style.left=200;   
        div2.style.top=200;
        document.getElementById( "div2").style.display = "block";
         document.getElementById('imgdd').src=s; 
    }
    这是我的代码
    我想让div2.style.top=中间,上面楼上的我都试了,不行啊
      

  5.   

    我IE7，三楼的方法没问题function bl2(title) 
    { 
        var s=title; 
        vat div2=document.getElementById( "div2");
        div2.style.left=200;  
        div2.style.top=200; 
        div2.style.display = "block"; 
        document.getElementById('imgdd').src=s; 
    } 
    这样试试
      

  6.   

    我想让div2.style.top=中间,而不是200,快帮忙啊哦
      

  7.   


    div2.style.display = "block";
    div2.style.top = (document.documentElement.clientHeight - div2.offsetWidth) / 2 + document.documentElement.scrollTop + "px";
    div2.style.left = (document.documentElement.clientWidth - div2.offsetHeight) / 2 + document.documentElement.scrollLeft + "px";
      

  8.   

    汗,,上面那个写反了
    div2.style.display = "block";
    div2.style.top = (document.documentElement.clientHeight - div2.offsetHeight) / 2 + document.documentElement.scrollTop + "px";
    div2.style.left = (document.documentElement.clientWidth - div2.offsetWidth) / 2 + document.documentElement.scrollLeft + "px";
      

  9.   

    参见：http://www.v-ec.com/dh20156/code/crossframe/x.html