符合web标准的跟随滚动条运动 div + css

作者: Nishizhen 分类: OBlog Achives(旧博客归档) 发布时间: 2011-09-20 12:23 ė 61条评论

现如今在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>  

本文出自 逆时针's Place,转载时请注明出处及相应链接。

本文永久链接: http://www.nishizhen.cn/%e7%ac%a6%e5%90%88web%e6%a0%87%e5%87%86%e7%9a%84%e8%b7%9f%e9%9a%8f%e6%bb%9a%e5%8a%a8%e6%9d%a1%e8%bf%90%e5%8a%a8-div-css/

一条评论

  1. promotion bags 2012年8月25日 11:53

    头疼死了,效果这么就不行呢,js浏览器大战

发表评论

电子邮件地址不会被公开。 必填项已用*标注

验证码 * Time limit is exhausted. Please reload CAPTCHA.

Ɣ回顶部