0
符合web标准的跟随滚动条运动 div + css
现如今在web标准的影响下，国内也已经有大量的Firefox以及其他内核的浏览器的用户，在很多时候，一些没有遵循web标准写的代码在不同浏览器会出现问题，所以我们要提倡适合标准的写法，这里先来一个网页中非常常见的符合web标准的跟随滚动条运动的脚本，代码如下：
脚本部份分为以下两段：
<script type="text/javascript">
function scrollImg(){
var posX,posY;
if (window.innerHeight) {
posX = window.pageXOffset;
posY = window.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop) {
posX = document.documentElement.scrollLeft;
posY = document.documentElement.scrollTop;
}
else if (document.body) {
posX = document.body.scrollLeft;
posY = document.body.scrollTop;
}
var ad=document.getElementById("ad");
ad.style.top=(posY+100)+"px";
ad.style.left=(posX+50)+"px";
setTimeout("scrollImg()",100);
}
</script>
<script type="text/javascript"> scrollImg(); </script>
div部份：
<div id="ad" style="position:absolute;background:#eeeeee;width:100px;height:100px;border:1px dotted #000;line-height:100px;text-align:center">此广告位招租</div>
最终效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>符合web标准的跟随滚动条运动</title>
</head>
<body>
<script type="text/javascript">
function scrollImg(){
var posX,posY;
if (window.innerHeight) {
posX = window.pageXOffset;
posY = window.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop) {
posX = document.documentElement.scrollLeft;
posY = document.documentElement.scrollTop;
}
else if (document.body) {
posX = document.body.scrollLeft;
posY = document.body.scrollTop;
}
var ad=document.getElementById("ad");
ad.style.top=(posY+100)+"px";
ad.style.left=(posX+50)+"px";
setTimeout("scrollImg()",100);
}
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="ad" style="position:absolute;background:#eeeeee;width:100px;height:100px;border:1px dotted #000;line-height:100px;text-align:center">此广告位招租</div>
<script type="text/javascript">
scrollImg();
</script>
</body>
</html>
最新评论(Recent Comments)：