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

题目有点儿拗口,知道意思就行了。从昨天下午、晚上开始,加上今天全天,差不多都在弄这个东西。在为一个项目做些准备工作,这也算是其中的一个细节。

下了不少网站的代码,竟然没有发现一个完美的,甚至有不少页面,在firefox下是动不了的。有一个站点的代码封装的很好,本来想直接拿过来用,谁知道自己的页面引用后,就是得不到想到的结果。折腾了好久才发现,原来它的DOCType用的是html4.01,而我用的是xhtml1.0的,改过去效果就出来了,但这样一来,我的版面就出现了一些异常,看来也没办法直接用,除非对它的源文件进行修改,以适应新的标准,但对于javacript来说,这真是一件让人头痛的事情。

后来,还是从网上搜了一段代码,发现比较简洁,并且在新的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();

引用时类似这样:

<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,设计时总会让人觉得不爽,我看有些朋友就把它放到脚本中去生成了。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

极客行天下

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值