现如今在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 条评论
头疼死了,效果这么就不行呢,js浏览器大战