原本工作正常的对联广告突然宣布罢工，为什么？标准化真的那么脆弱吗？"
不符合标准的正常工作的对联广告：
1
<html xmlns="http://www.w3.org/1999/xhtml">
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4<title>不符合标准的正常工作的对联广告</title>
5<script language="JavaScript" type="text/javascript">
6
lastScrollY=0;
7
function heartBeat(){
8diffY=document.body.scrollTop;
9percent=.1*(diffY-lastScrollY);
10if(percent>0)percent=Math.ceil(percent);
11else percent=Math.floor(percent);
12document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
13document.getElementById("lovexin14").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
14lastScrollY=lastScrollY+percent;
15
}
16suspendcode12="<DIV id=\"lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1</div>"
17suspendcode14="<DIV id=\"lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2</div>"
18document.write(suspendcode12);
19document.write(suspendcode14);
20
window.setInterval("heartBeat()",1);
21</script>
22<style type="text/css">
23<!--
24#lovexin12,#lovexin14{
25width:120px;
26height:250px;
27background-color:#e5e5e5;
28border:1px solid #ddd;
29}
30html,body{
31height:1000px;
32}
33#mm{
34height:1000px;
35}
36-->
37</style>
38</head>
39
40<body>
41<div id="mm">
42</div>
43</body>
44</html>
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5<title>符合标准的不能正常工作的对联广告</title>
6<script language="JavaScript" type="text/javascript">
7lastScrollY=0;
8function heartBeat(){
9diffY=document.body.scrollTop;
10percent=.1*(diffY-lastScrollY);
11if(percent>0)percent=Math.ceil(percent);
12else percent=Math.floor(percent);
13document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
14document.getElementById("lovexin14").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
15lastScrollY=lastScrollY+percent;
16}
17suspendcode12="<DIV id=\"lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1</div>"
18suspendcode14="<DIV id=\"lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2</div>"
19document.write(suspendcode12);
20document.write(suspendcode14);
21window.setInterval("heartBeat()",1);
22</script>
23<style type="text/css">
24<!--
25#lovexin12,#lovexin14{
26width:120px;
27height:250px;
28background-color:#e5e5e5;
29border:1px solid #ddd;
30}
31html,body{
32height:1000px;
33}
34#mm{
35height:1000px;
36}
37-->
38</style>
39</head>
40
41<body>
42<div id="mm">
43</div>
44</body>
45</html>
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2
3"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml">
5<head>
6<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
7<title>符合标准的正常工作的对联广告</title>
8<script language="JavaScript" type="text/javascript">
9lastScrollY=0;
10function heartBeat(){
11var diffY;
12if (document.documentElement && document.documentElement.scrollTop)
13diffY = document.documentElement.scrollTop;
14else if (document.body)
15diffY = document.body.scrollTop
16else
17{/*Netscape stuff*/}
18
19//alert(diffY);
20percent=.1*(diffY-lastScrollY);
21if(percent>0)percent=Math.ceil(percent);
22else percent=Math.floor(percent);
23document.getElementById("lovexin12").style.top=parseInt(document.getElementById
24
25("lovexin12").style.top)+percent+"px";
26document.getElementById("lovexin14").style.top=parseInt(document.getElementById
27
28("lovexin12").style.top)+percent+"px";
29
30lastScrollY=lastScrollY+percent;
31//alert(lastScrollY);
32}
33suspendcode12="<DIV id=\"lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1</div>"
34suspendcode14="<DIV id=\"lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2</div>"
35document.write(suspendcode12);
36document.write(suspendcode14);
37window.setInterval("heartBeat()",1);
38</script>
39
40<style type="text/css">
41<!--
42#lovexin12,#lovexin14{
43width:120px;
44height:250px;
45background-color:#e5e5e5;
46border:1px solid #ddd;
47}
48html,body{
49height:1000px;
50}
51#mm{
52height:1000px;
53}
54-->
55</style>
56</head>
57
58<body>
59<div id="mm">
60</div>
61</body>
62</html>
1var imgheight
2var imgleft
3document.ns = navigator.appName == "Netscape"
4window.screen.width>800 ? imgheight=100:imgheight=100
5window.screen.width>800 ? imgleft=15:imgleft=122
6function myload()
7{
8if (navigator.appName == "Netscape")
9{document.myleft.pageY=pageYOffset+window.innerHeight-imgheight;
10document.myleft.pageX=imgleft;
11leftmove();
12}
13else
14{
15myleft.style.top=document.body.scrollTop+document.body.offsetHeight-imgheight;
16myleft.style.left=imgleft;
17leftmove();
18}
19}
20function leftmove()
21{
22if(document.ns)
23{
24document.myleft.top=pageYOffset+window.innerHeight-imgheight
25document.myleft.left=imgleft;
26setTimeout("leftmove();",80)
27}
28else
29{
30myleft.style.top=document.body.scrollTop+document.body.offsetHeight-imgheight;
31myleft.style.left=imgleft;
32setTimeout("leftmove();",80)
33}
34}
35
36
37if (navigator.appName == "Netscape")
38{
39document.write("<layer id=myleft top=300 width=80 height=88><EMBED src='swf/00001.swf' quality=high WIDTH=80 HEIGHT=80 TYPE='application/x-shockwave-flash' id=changhongout wmode='transparent'></EMBED></layer>");
40myload()}
41else
42{
43document.write("<div id=myleft style='position: absolute;width:80;top:150;left:5;visibility: visible;z-index: 1'><EMBED src='swf/00001.swf' quality=high WIDTH=80 HEIGHT=80 TYPE='application/x-shockwave-flash' id=changhongout wmode='transparent'></EMBED></div>");
44myload()
45}
46
Code
不符合标准的正常工作的对联广告：
1
<html xmlns="http://www.w3.org/1999/xhtml">2
<head>3
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />4
<title>不符合标准的正常工作的对联广告</title>5
<script language="JavaScript" type="text/javascript">
6
lastScrollY=0;7
function heartBeat(){ 
8
diffY=document.body.scrollTop; 9
percent=.1*(diffY-lastScrollY); 10
if(percent>0)percent=Math.ceil(percent); 11
else percent=Math.floor(percent); 12
document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";13
document.getElementById("lovexin14").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";14
lastScrollY=lastScrollY+percent; 15
}16
suspendcode12="<DIV id=\"lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1</div>"17
suspendcode14="<DIV id=\"lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2</div>"18
document.write(suspendcode12); 19
document.write(suspendcode14); 20
window.setInterval("heartBeat()",1);21
</script>22
<style type="text/css">23
<!--24
#lovexin12,#lovexin14{25
width:120px;26
height:250px;27
background-color:#e5e5e5;28
border:1px solid #ddd;29
}30
html,body{31
height:1000px;32
}33
#mm{34
height:1000px;35
}36
-->37
</style>38
</head>39
40
<body>41
<div id="mm">42
</div>43
</body>44
</html>
这个是可以正常运行的，只要你不使用文档类型声明。
但是，标准设计的网页需要进行文档类型声明以告知浏览器按照怎样的规则去解析网页。当我们使用过渡型标准声明的时候，我们发现这个原本工作正常的对联代码不再起作用。
这是符合标准的代码，和上面的区别是它加了文档类型声明：
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<title>符合标准的不能正常工作的对联广告</title>6
<script language="JavaScript" type="text/javascript">7
lastScrollY=0;8
function heartBeat(){ 9
diffY=document.body.scrollTop; 10
percent=.1*(diffY-lastScrollY); 11
if(percent>0)percent=Math.ceil(percent); 12
else percent=Math.floor(percent); 13
document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";14
document.getElementById("lovexin14").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";15
lastScrollY=lastScrollY+percent; 16
}17
suspendcode12="<DIV id=\"lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1</div>"18
suspendcode14="<DIV id=\"lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2</div>"19
document.write(suspendcode12); 20
document.write(suspendcode14); 21
window.setInterval("heartBeat()",1);22
</script>23
<style type="text/css">24
<!--25
#lovexin12,#lovexin14{26
width:120px;27
height:250px;28
background-color:#e5e5e5;29
border:1px solid #ddd;30
}31
html,body{32
height:1000px;33
}34
#mm{35
height:1000px;36
}37
-->38
</style>39
</head>40
41
<body>42
<div id="mm">43
</div>44
</body>45
</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*/}
符合标准的正常工作的对联广告：
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2
3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4
<html xmlns="http://www.w3.org/1999/xhtml">5
<head>6
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />7
<title>符合标准的正常工作的对联广告</title>8
<script language="JavaScript" type="text/javascript">9
lastScrollY=0;10
function heartBeat(){ 11
var diffY;12
if (document.documentElement && document.documentElement.scrollTop)13
diffY = document.documentElement.scrollTop;14
else if (document.body)15
diffY = document.body.scrollTop16
else17
{/*Netscape stuff*/}18
19
//alert(diffY);20
percent=.1*(diffY-lastScrollY); 21
if(percent>0)percent=Math.ceil(percent); 22
else percent=Math.floor(percent); 23
document.getElementById("lovexin12").style.top=parseInt(document.getElementById24
25
("lovexin12").style.top)+percent+"px";26
document.getElementById("lovexin14").style.top=parseInt(document.getElementById27
28
("lovexin12").style.top)+percent+"px";29
30
lastScrollY=lastScrollY+percent; 31
//alert(lastScrollY);32
}33
suspendcode12="<DIV id=\"lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1</div>"34
suspendcode14="<DIV id=\"lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2</div>"35
document.write(suspendcode12); 36
document.write(suspendcode14); 37
window.setInterval("heartBeat()",1);38
</script>39
40
<style type="text/css">41
<!--42
#lovexin12,#lovexin14{43
width:120px;44
height:250px;45
background-color:#e5e5e5;46
border:1px solid #ddd;47
}48
html,body{49
height:1000px;50
}51
#mm{52
height:1000px;53
}54
-->55
</style>56
</head>57
58
<body>59
<div id="mm">60
</div>61
</body>62
</html>以上代码在ie6.0,firefox1.5.0.3,opera7.23下测试通过。
ok,大功告成，干杯！
多说一句，DOCTYPE经常被人忽略，今天看来，实在不应该。
网站Flash对联广告源代码：
把下面这段代码保存为 adver-left.js
1
var imgheight 2
var imgleft 3
document.ns = navigator.appName == "Netscape" 4
window.screen.width>800 ? imgheight=100:imgheight=100 5
window.screen.width>800 ? imgleft=15:imgleft=122 6
function myload() 7
{ 8
if (navigator.appName == "Netscape") 9
{document.myleft.pageY=pageYOffset+window.innerHeight-imgheight; 10
document.myleft.pageX=imgleft; 11
leftmove(); 12
} 13
else 14
{ 15
myleft.style.top=document.body.scrollTop+document.body.offsetHeight-imgheight; 16
myleft.style.left=imgleft; 17
leftmove(); 18
} 19
} 20
function leftmove() 21
{ 22
if(document.ns) 23
{ 24
document.myleft.top=pageYOffset+window.innerHeight-imgheight 25
document.myleft.left=imgleft; 26
setTimeout("leftmove();",80) 27
} 28
else 29
{ 30
myleft.style.top=document.body.scrollTop+document.body.offsetHeight-imgheight; 31
myleft.style.left=imgleft; 32
setTimeout("leftmove();",80) 33
} 34
} 35
36
37
if (navigator.appName == "Netscape") 38
{ 39
document.write("<layer id=myleft top=300 width=80 height=88><EMBED src='swf/00001.swf' quality=high WIDTH=80 HEIGHT=80 TYPE='application/x-shockwave-flash' id=changhongout wmode='transparent'></EMBED></layer>"); 40
myload()} 41
else 42
{ 43
document.write("<div id=myleft style='position: absolute;width:80;top:150;left:5;visibility: visible;z-index: 1'><EMBED src='swf/00001.swf' quality=high WIDTH=80 HEIGHT=80 TYPE='application/x-shockwave-flash' id=changhongout wmode='transparent'></EMBED></div>"); 44
myload() 45
} 46
把下面这段代码保存为 adver-right.js
Code
网页中是这样调用,注意修改 js 文件的路径
<SCRIPT src="js/adver-left.js"></SCRIPT>
<SCRIPT src="js/adver-right.js"></SCRIPT>
上面两段代码中的 src='swf/00001.swf' ,改为自己广告的flash的路径
浙公网安备 33010602011771号