从网上搜了一段代码,发现比较简洁,并且在新的w3c规范下,ie和ff都算正常,于是就对它进行了简单的改进,基本上算是符合了我的要求:
- //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();
//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();
引用时类似这样:
- <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>
<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,设计时总会让人觉得不爽,我看有些朋友就把它放到脚本中去生成了。