1:首先讲一下如何取得坐标的一些小问题
要获取当前页面的滚动条纵坐标位置,用:
document.documentElement.scrollTop;
而不是:
document.body.scrollTop;
documentElement 对应的是 html 标签,而 body 对应的是 body 标签。
在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替;
如果你想定位鼠标相对于页面的绝对位置时,你会发现google里面1000篇文章里面有999.99篇会让你使用event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop,如果你发现你的鼠标定位偏离了你的想象,请不要奇怪,这是再正常不过的事情。
ie5.5之后已经不支持document.body.scrollX对象了。
所以在编程的时候,请加上这样的判断
if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
top=document.body.scrollTop;
left=document.body.scrollleft;
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft;
}
具体是一个小列子
DIV的定义是这样
要获取当前页面的滚动条纵坐标位置,用:
document.documentElement.scrollTop;
而不是:
document.body.scrollTop;
documentElement 对应的是 html 标签,而 body 对应的是 body 标签。
在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替;
如果你想定位鼠标相对于页面的绝对位置时,你会发现google里面1000篇文章里面有999.99篇会让你使用event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop,如果你发现你的鼠标定位偏离了你的想象,请不要奇怪,这是再正常不过的事情。
ie5.5之后已经不支持document.body.scrollX对象了。
所以在编程的时候,请加上这样的判断
if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
top=document.body.scrollTop;
left=document.body.scrollleft;
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft;
}
具体是一个小列子
<script>
var lastScrollY=0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("adleft").style.top=parseInt(document.getElementById("adleft").style.top)+percent+"px";
document.getElementById("adright").style.top=parseInt(document.getElementById("adright").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
}
function adhide(names){document.getElementById(names).style.display='none';}
function screencl(names){if(screen.width<=800){adhide(names);}}
zcode="<div id='adleft' class='DlLeft' style='top:100px;'><div class='DlBorder'><!--左联 --></div><div align='right' class='Close'> <img src='../images/close.gif' title='关闭 ' onclick=adhide('adleft') style='cursor:pointer'></div></div>";
ycode="<div id='adright' class='DlRight' style='top:100px;'><div style='DlBorder'><!--右联--></div><div align='left' class='Close'> <img src='../images/close.gif' title='关闭 ' onclick=adhide('adright') style='cursor:pointer'></div></div>";
document.write(zcode);
document.write(ycode);
screencl('adleft');
screencl('adright');
window.setInterval("heartBeat()",1);
</script>
DIV的定义是这样
.DlLeft{
left:10px;
position: absolute;
z-index:1;
background:#fff;
}
.DlBorder{
overflow:auto;
border:#999 solid 1px;
}
.Close{
overflow:auto;
background-color:#FFFFFF;
font-size:0px;
}
.DlRight{
right:10px;
position: absolute;
background:#fff;
z-index:1;
}