符合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>  

《“符合web标准的跟随滚动条运动 div + css”》 有 1 条评论

发表回复

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

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