网页窗口不能浮动,求各位大侠指教解决思路
日期：2014-05-16 浏览次数：20418 次
网页窗口不能浮动,求各位大侠指教
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我想让网页里的图片随着滚动条而向下浮动，但是加上前面的声明就不可以了，去掉声明就能成功，但是去掉声明margin:0 auto 又没法起作用！！
下面是源码：
<!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>
<script type="text/javascript">
function init(){
picTop=document.getElementById("advLayer").style.pixelTop;
advTop=document.getElementById("closeLayer").style.pixelTop;
lokTop=document.getElementById("lookLayer").style.pixeTop;
qqTop=document.getElementById("qqLayer").style.pixelTop;
}
function move(){
document.getElementById("advLayer").style.pixelTop=picTop+document.body.scrollTop;
document.getElementById("closeLayer").style.pixelTop=picTop+document.body.scrollTop;
document.getElementById("lookLayer").style.pixelTop=lokTop+document.body.scrollTop;
document.getElementById("qqLayer").style.pixelTop=qqTop+document.body.scrollTop;
}
function closeAdv(){
document.getElementById("advLayer").style.display="none";
document.getElementById("closeLayer").style.display="none";
document.getElementById("lookLayer").style.display="none";
document.getElementById("qqLayer").style.display="none";
}
window.onscroll=move;
</script>
</head>
<body onload="init()">
<table width="1000" height="1000" border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<div id="advLayer" style="position:absolute; left:446px; top:80px; width:302px; height:171px; z-index:1;">
<img src="images/float.jpg" width="421"; height="190" /></div>
<div onClick="closeAdv()" id="closeLayer" style="position:absolute; left:834px; top:81px; width:27px; height:19px; z-index:2;">
<img src="images/close.jpg" width="30" height="26" /></div>
<div id="lookLayer" style="position:absolute; z-index:3; left: 460px; top: 229px;">
<img src="images/look.jpg"; width="93"; height="31"/></div>
<div id="qqLayer" style="position:absolute; z-index:4; left: 569px; top: 230px;">
<img src="images/qq.jpg" width="93"; height="31" /></div>
</body>
</html>
------解决方案--------------------
document.getElementById("advLayer").style.pixelTop = picTop + document.documentElement.scrollTop;
这样就行了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我想让网页里的图片随着滚动条而向下浮动，但是加上前面的声明就不可以了，去掉声明就能成功，但是去掉声明margin:0 auto 又没法起作用！！
下面是源码：
<!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>
<script type="text/javascript">
function init(){
picTop=document.getElementById("advLayer").style.pixelTop;
advTop=document.getElementById("closeLayer").style.pixelTop;
lokTop=document.getElementById("lookLayer").style.pixeTop;
qqTop=document.getElementById("qqLayer").style.pixelTop;
}
function move(){
document.getElementById("advLayer").style.pixelTop=picTop+document.body.scrollTop;
document.getElementById("closeLayer").style.pixelTop=picTop+document.body.scrollTop;
document.getElementById("lookLayer").style.pixelTop=lokTop+document.body.scrollTop;
document.getElementById("qqLayer").style.pixelTop=qqTop+document.body.scrollTop;
}
function closeAdv(){
document.getElementById("advLayer").style.display="none";
document.getElementById("closeLayer").style.display="none";
document.getElementById("lookLayer").style.display="none";
document.getElementById("qqLayer").style.display="none";
}
window.onscroll=move;
</script>
</head>
<body onload="init()">
<table width="1000" height="1000" border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<div id="advLayer" style="position:absolute; left:446px; top:80px; width:302px; height:171px; z-index:1;">
<img src="images/float.jpg" width="421"; height="190" /></div>
<div onClick="closeAdv()" id="closeLayer" style="position:absolute; left:834px; top:81px; width:27px; height:19px; z-index:2;">
<img src="images/close.jpg" width="30" height="26" /></div>
<div id="lookLayer" style="position:absolute; z-index:3; left: 460px; top: 229px;">
<img src="images/look.jpg"; width="93"; height="31"/></div>
<div id="qqLayer" style="position:absolute; z-index:4; left: 569px; top: 230px;">
<img src="images/qq.jpg" width="93"; height="31" /></div>
</body>
</html>
------解决方案--------------------
document.getElementById("advLayer").style.pixelTop = picTop + document.documentElement.scrollTop;
这样就行了
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
