一段随滚动条而动的浮动层脚本

从网上搜了一段代码，发现比较简洁，并且在新的w3c规范下，ie和ff都算正常，于是就对它进行了简单的改进，基本上算是符合了我的要求：

view plain copy to clipboard print ?

1. //hight_floater.js   
2.   
3. var tips;var theTop = 200;/*这是默认高度,越大越往下*/var old = theTop;   
4.   
5. function initFloatTips() {   
6.   
7. tips = document.getElementById('floatTips');   
8.   
9. tips.style.left= document.body.clientWidth-200 + "px";   
10.   
11. moveTips();   
12.   
13. };   
14.   
15.   
16.   
17. function moveTips() {   
18.   
19. var tt=50;   
20.   
21. if (window.innerHeight) {   
22.   
23. pos = window.pageYOffset   
24.   
25. }   
26.   
27. else if (document.documentElement && document.documentElement.scrollTop) {   
28.   
29. pos = document.documentElement.scrollTop   
30.   
31. }   
32.   
33. else if (document.body) {   
34.   
35. pos = document.body.scrollTop;   
36.   
37. }   
38.   
39. pos=pos-tips.offsetTop+theTop;   
40.   
41. pos=tips.offsetTop+pos/10;   
42.   
43. if (pos < theTop) pos = theTop;   
44.   
45. if (pos != old) {   
46.   
47. tips.style.top = pos+"px";   
48.   
49. tt=10;   
50.   
51. }   
52.   
53. old = pos;   
54.   
55. setTimeout(moveTips,tt);   
56.   
57. }   
58.   
59.   
60.   
61. initFloatTips();  

//hight_floater.js

var tips;var theTop = 200;/*这是默认高度,越大越往下*/var old = theTop;

function initFloatTips() {

tips = document.getElementById('floatTips');

tips.style.left= document.body.clientWidth-200 + "px";

moveTips();

};



function moveTips() {

var tt=50;

if (window.innerHeight) {

pos = window.pageYOffset

}

else if (document.documentElement && document.documentElement.scrollTop) {

pos = document.documentElement.scrollTop

}

else if (document.body) {

pos = document.body.scrollTop;

}

pos=pos-tips.offsetTop+theTop;

pos=tips.offsetTop+pos/10;

if (pos < theTop) pos = theTop;

if (pos != old) {

tips.style.top = pos+"px";

tt=10;

}

old = pos;

setTimeout(moveTips,tt);

}



initFloatTips();

引用时类似这样：

view plain copy to clipboard print ?

1. <div style="height:25px; background-color:Beige; width:100px; position:absolute; z-index:100; border:0px;" id="floatTips"><a href="#">hello</a></div>  
2.   
3. <script type="text/javascript" src="js/hight_floater.js"></script>  

<div style="height:25px; background-color:Beige; width:100px; position:absolute; z-index:100; border:0px;" id="floatTips"><a href="#">hello</a></div>

<script type="text/javascript" src="js/hight_floater.js"></script>

在对代码进行改进时碰到一个问题折腾了好久才搞定，就是这句：tips.style.left= document.body.clientWidth-200 + "px";用来设置其水平位置的，开始时我没有+"px"这个尾巴，在FF下就是不能出现在想要的地方，后来才发现，FF是一个认真的学生，而ie则像一个调皮的孩子，所以，安上了尾巴就OK了。我这里在引用的时候，需要在页面上部置一个div，设计时总会让人觉得不爽，我看有些朋友就把它放到脚本中去生成了。