设置div始终保持在屏幕左边的中央

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>设置</title>
</head>
<body onscroll="go()">
<div id="Layer1" style="background:gray;width:300px;height:100px;overflow:auto;position:absolute;">Happy New Year ! ! !<p>
<input type=button name='button_export' onclick=OpenWord() value=设置>
<p><p><p><p><p><p><br><P><p><p><p><p><p><p><p><p><p><p>><p><p><p><p><p>
<br><P><p><p><p><p><p><p><p><p><p><p>
<p><p><p><p><p><br><P><p><p><p><p><p><p><p><p><p><p>
<p><p><p><p><p><br><P><p><p><p><p><p><p><p><p><p><p>
<p><p><p><p><p><br><P><p><p><p><p><p><p><p><p><p><p>
this is a test!</div><p>this is a test!</p>
<table width=100% height=900>
<tr><td>&nbsp;</td></tr>
</table>
<p>this is a test!</p>
</body>
</html>
<script language="javascript">
var layer=document.getElementById("Layer1");
layer.style.posLeft=(document.body.clientWidth-layer.offsetWidth)/2;
layer.style.posTop=(document.body.clientHeight-layer.offsetHeight)/2;
function go(){
layer.style.posLeft=(document.body.clientWidth-layer.offsetWidth)/2+document.body.scrollLeft;
layer.style.posTop=(document.body.clientHeight-layer.offsetHeight)/2+document.body.scrollTop;
}
function OpenWord(){
Layer1.style.border=1
Layer1.scrollTop=100;
}
</script>

解决方案 »

  1.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>设置</title>
    <script type="text/javascript">
    <!--
    function doLoad(){
        var div = document.getElementById("Layer1");
        function setTop(){ div.style.top = (document.body.scrollTop + document.body.offsetHeight / 2 - div.offsetHeight / 2) + "px"; }
        setTop();
        document.body.onscroll = setTop;
        window.onresize = setTop;
    }
    //-->
    </script>
    </head>
    <body onload="doLoad()">
    <div id="Layer1" style="background:gray;width:100px;height:100px;overflow:auto;position:absolute;left:0px;"></div>
    <script type="text/javascript">
    <!--
    var i=400;
    while(i--){
        document.write("<br>");
    }
    //-->
    </script>
    </body>
    </html>