随滚动条滚动而滚动的层的实例:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<div id="oLayer" style="position:absolute;left:30;top:60;z-index:2;background:green;width:120px;height:70px">
</div>
<script language="javascript">
document.write(new Array(100).join("<br>"))
var init_pos=document.getElementById('oLayer').style.posTop ;
document.body.οnscrοll=function(){
document.getElementById('oLayer').style.posTop=document.body.scrollTop+init_pos ;
}
</script>
</BODY>
</HTML>
这里要强调一下
一、 在页面中加一个随着页面滚动条滚动的小图片广告,发现document.body.scrollTop
这个属性在本地的时候能取到值,但是传到服务器上的时候取到的值一直不变,其解决方案有如下2种:
<1> 原来在HTML文件头部声明了这样一句:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
改成这样就好了:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
但是W3c的标准的引用,样式会发生变化。
<2>将document.body.scrollTop改为document.documentElement.scrollTop;
二、我使用的是IE7,实施很正常,可是当在IE6里面时,window.document.body.onscroll在我的IE6览器里根本就不触发,所以这又是一个新问题了,在网上找了找其原因及解决办法如下:
其原因还是和DOCTYPE声明有关,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">,这个DOCTYPE声明是不会触发window.document.body.onscroll事件的,那如果再改变DOCTYPE声明的话又会影响到页面的CSS,所以此方法是不可行的,下面还有两种解决办法:
<1>使用setInterval或者setTimeout来不停的改变这个浮动层的位置;(这个方法很占资源,在不得以的情况下使用)
<2>CSS属性值position的fixed属性让该层能够始终位于窗口的指定位置;(该方案看起来挺美,可惜IE并不支持。不过在FireFox中的效果的确不错。正如文章在所说"从显示效果来看,在Firefox上的显示效果比IE中通过onscroll触发层的位置移动处理显示效果要好很多,看不到层的闪动。")
相关资料:
CSS positionfixed; for IE6
http://www.cssplay.co.uk/layouts/fixed.html
在下暂时还是使用了第一个方案...,具体实例如下:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<div id="floatLayout" style="position:absolute;left:30;top:60;z-index:2;background:green;width:120px;height:70px">
</div>
<script language="javascript">
document.write(new Array(100).join("<br>"))
var init_pos=document.getElementById('floatLayout').style.posTop ;
function displaytopleft(){
cHeight = document.body.clientHeight;// 頁面的實際高度
var nowTop = 0;
//ie5.5之后已经不支持document.body.scrollX对象了,所以要看其ie版本
if (document.body && document.body.scrollTop)
{
nowTop=document.body.scrollTop;
}
if (document.documentElement && document.documentElement.scrollTop)
{
nowTop=document.documentElement.scrollTop;
}
lTop = nowTop+init_pos;
if(cHeight > lTop){
document.getElementById('floatLayout').style.posTop=lTop ;
}
}
function topleft()
{
//使用setInterval或者setTimeout来不停的改变这个浮动层的位置
window.setInterval("displaytopleft()",10);
}
topleft();
</script>
</BODY>
</HTML>
2、漂浮窗口的实现实例:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<div id="floatLayout" style="position:absolute;z-index:1000;background:green;width:120px;height:70px">
</div>
<script language="javascript">
<!-- // Begin
var xPos = 800; //開始時浮動層left:800px
var yPos = 450; //開始時浮動層top:450px
var step = 1;
var delay = 20;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
floatLayout.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = floatLayout.offsetHeight;
Woffset = floatLayout.offsetWidth;
floatLayout.style.left = xPos + document.body.scrollLeft;
floatLayout.style.top = yPos + document.body.scrollTop;
if(yon){
yPos = yPos + step;
}
else{
yPos = yPos - step;
}
if(yPos < 0){
yon = 1;
yPos = 0;
}
if(yPos >= (height - Hoffset)){
yon = 0;
yPos = (height - Hoffset);
}
if(xon){
xPos = xPos + step;
}
else{
xPos = xPos - step;
}
if(xPos < 0){
xon = 1;
xPos = 0;
}
if(xPos >= (width - Woffset)){
xon = 0;
xPos = (width - Woffset);
}
}
function start() {
floatLayout.visibility = "visible";
interval = setInterval('changePos()', delay);
}
start();
// End -->
</script>
</BODY>
</HTML>