符合W3C标准的对联广告代码
昨天遇到一个客户，要在网站上面加对联，于是上懒人图库找了个代码，但是发现了一个比较纠结的问题，我代码是按照标准声明来写的。可以出现，就是不滚动，去掉了文档声明，页面又错位了，我顶。立马搜索了下，找到了以下的文章，有用，转过来先。
先看一下 不符合标准的正常工作的对联广告：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>不符合标准的正常工作的对联广告</title>
<script language="JavaScript" type="text/javascript">
lastScrollY=0;
function heartBeat(){
diffY=document.body.scrollTop;
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
document.getElementById("lovexin14").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
}
suspendcode12="<DIV id=\"lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1</div>"
suspendcode14="<DIV id=\"lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2</div>"
document.write(suspendcode12);
document.write(suspendcode14);
window.setInterval("heartBeat()",1);
</script>
<style type="text/css">
<!--
#lovexin12,#lovexin14{
width:120px;
height:250px;
background-color:#e5e5e5;
border:1px solid #ddd;
}
html,body{
height:1000px;
}
#mm{
height:1000px;
}
-->
</style>
</head>
<body>
<div id="mm">
</div>
</body>
</html>
这个是可以正常运行的，只要你不使用文档类型声明。
但是，标准设计的网页需要进行文档类型声明以告知浏览器按照怎样的规则去解析网页。当我们使用过渡型标准声明的时候，我们发现这个原本工作正常的对联代码不再起作用。
那么，为什么小小的标准声明让对联广告无法工作呢？
问题的根源：
google了几篇文章之后，找到了原因所在。
让我们回到第一段代码：
注意这一句：diffY=document.body.scrollTop;
当我们采用标准声明之后，你会发现无论你怎样拖动滚动条，diffY的值始终为零。见鬼了吗？不，事实上从html4/loose.dtd开始，只要你采用了相应的文档类型声明，diffY的值就会恒为零（有一种特殊情况，下面谈）。
为什么会这样？
因为采用标准的文档类型声明后，document.body.scrollTop已经无效，而应该用document.documentElement.scrollTop代替。
不仅仅是scrollTop有这种改变，更多请参加表（一）。
在表（一）中有这样一行：“Note: scrollLeft and scrollTop also work on DIV's with overflow: auto in Explorer 5+ on Windows and Mozilla 1.1”，这就是我所说的特殊情况。
怎么解决？
将第一段代码做一些修改：
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
最后看一下 符合标准的正常工作的对联广告：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>符合标准的正常工作的对联广告</title>
<script language="JavaScript" type="text/javascript">
lastScrollY=0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
//alert(diffY);
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("lovexin12").style.top=parseInt(document.getElementById
("lovexin12").style.top)+percent+"px";
document.getElementById("lovexin14").style.top=parseInt(document.getElementById
("lovexin12").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
//alert(lastScrollY);
}
suspendcode12="<DIV id=\"lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1</div>"
suspendcode14="<DIV id=\"lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2</div>"
document.write(suspendcode12);
document.write(suspendcode14);
window.setInterval("heartBeat()",1);
</script>
<style type="text/css">
<!--
#lovexin12,#lovexin14{
width:120px;
height:250px;
background-color:#e5e5e5;
border:1px solid #ddd;
}
html,body{
height:1000px;
}
#mm{
height:1000px;
}
-->
</style>
</head>
<body>
<div id="mm">
</div>
</body>
</html>
以上代码在ie6.0,firefox1.5.0.3,opera7.23下测试通过。
文章转自：蓝色理想
转载本站原创文章请注明：文章转自 挨踢路，链接: https://986554.ykncch.asia/articles/1474.html
就个人,我不喜欢对联广告,一般有对联广告的网站,我会点关闭,呵呵........
其实,我也不喜欢的,体验很不好