飘浮窗口及随滚动条滚动而滚动的层
随滚动条滚动而滚动的层的实例：<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.onscroll=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属性让该层能够始终位于窗口的指定位置；（该方案看起来挺美，可惜ＩＥ并不支持。不过在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 varstep = 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; functionchangePos() { 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); } } functionstart() { floatLayout.visibility = "visible"; interval = setInterval('changePos()', delay); } start(); // End --> </script> </BODY></HTML>
页:
[1]