设置div始终保持在屏幕左边的中央解决方法
日期：2014-05-16 浏览次数：20387 次
设置div始终保持在屏幕左边的中央
请问，我有一个div在屏幕的左边中央，我想在滚动屏幕的时候，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> </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>
------解决方案--------------------
<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>
请问，我有一个div在屏幕的左边中央，我想在滚动屏幕的时候，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> </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>
------解决方案--------------------
<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
