符合标准的对联广告代码

原文链接: http://www.cnblogs.com/X-Jonney/archive/2009/03/17/1414237.html
原本工作正常的对联广告突然宣布罢工,为什么?标准化真的那么脆弱吗?"

不符合标准的正常工作的对联广告:
ContractedBlock.gif ExpandedBlockStart.gif 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>
 5ExpandedBlockStart.gifContractedBlock.gif<script language="JavaScript" type="text/javascript">
 6lastScrollY=0;
 7ExpandedSubBlockStart.gifContractedSubBlock.giffunction 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=""lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1
"
17suspendcode14=""lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2
"
18document.write(suspendcode12); 
19document.write(suspendcode14); 
20window.setInterval("heartBeat()",1);
21script>
22ExpandedBlockStart.gifContractedBlock.gif<style type="text/css">
23
37
style>
38head>
39
40<body>
41<div id="mm">
42div>
43body>
44html>

 

这个是可以正常运行的,只要你不使用文档类型声明。

但是,标准设计的网页需要进行文档类型声明以告知浏览器按照怎样的规则去解析网页。当我们使用过渡型标准声明的时候,我们发现这个原本工作正常的对联代码不再起作用。

这是符合标准的代码,和上面的区别是它加了文档类型声明:

 

ContractedBlock.gif ExpandedBlockStart.gif Code
 1DOCTYPE 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>
 6ExpandedBlockStart.gifContractedBlock.gif<script language="JavaScript" type="text/javascript">
 7lastScrollY=0;
 8ExpandedSubBlockStart.gifContractedSubBlock.giffunction 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=""lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1
"
18suspendcode14=""lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2
"
19document.write(suspendcode12); 
20document.write(suspendcode14); 
21window.setInterval("heartBeat()",1);
22script>
23ExpandedBlockStart.gifContractedBlock.gif<style type="text/css">
24
38
style>
39head>
40
41<body>
42<div id="mm">
43div>
44body>
45html>

 

那么,为什么小小的标准声明让对联广告无法工作呢?
问题的根源:
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*/}


符合标准的正常工作的对联广告:

 

ContractedBlock.gif ExpandedBlockStart.gif Code
 1DOCTYPE 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>
 8ExpandedBlockStart.gifContractedBlock.gif<script language="JavaScript" type="text/javascript">
 9lastScrollY=0;
10ExpandedSubBlockStart.gifContractedSubBlock.giffunction heartBeat()
11var diffY;
12if (document.documentElement && document.documentElement.scrollTop)
13diffY = document.documentElement.scrollTop;
14else if (document.body)
15diffY = document.body.scrollTop
16else
17ExpandedSubBlockStart.gifContractedSubBlock.gif{/**//*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=""lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1
"
34suspendcode14=""lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2
"
35document.write(suspendcode12); 
36document.write(suspendcode14); 
37window.setInterval("heartBeat()",1);
38script>
39
40ExpandedBlockStart.gifContractedBlock.gif<style type="text/css">
41
55
style>
56head>
57
58<body>
59<div id="mm">
60div>
61body>
62html>

以上代码在ie6.0,firefox1.5.0.3,opera7.23下测试通过。
ok,大功告成,干杯!
多说一句,DOCTYPE经常被人忽略,今天看来,实在不应该。

网站Flash对联广告源代码:

把下面这段代码保存为 adver-left.js

 

ContractedBlock.gif ExpandedBlockStart.gif Code
 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() 
 7ExpandedBlockStart.gifContractedBlock.gif
 8if (navigator.appName == "Netscape"
 9ExpandedSubBlockStart.gifContractedSubBlock.gif{document.myleft.pageY=pageYOffset+window.innerHeight-imgheight; 
10document.myleft.pageX=imgleft; 
11leftmove(); 
12}
 
13else 
14ExpandedSubBlockStart.gifContractedSubBlock.gif
15myleft.style.top=document.body.scrollTop+document.body.offsetHeight-imgheight; 
16myleft.style.left=imgleft; 
17leftmove(); 
18}
 
19}
 
20function leftmove() 
21ExpandedBlockStart.gifContractedBlock.gif
22if(document.ns) 
23ExpandedSubBlockStart.gifContractedSubBlock.gif
24document.myleft.top=pageYOffset+window.innerHeight-imgheight 
25document.myleft.left=imgleft; 
26setTimeout("leftmove();",80
27}
 
28else 
29ExpandedSubBlockStart.gifContractedSubBlock.gif
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"
38ExpandedBlockStart.gifContractedBlock.gif
39document.write(""); 
40myload()}
 
41else 
42ExpandedBlockStart.gifContractedBlock.gif
43document.write("
"); 
44myload() 
45} 
46


把下面这段代码保存为 adver-right.js

ContractedBlock.gif ExpandedBlockStart.gif Code
 1var imgheight 
 2document.ns = navigator.appName == "Netscape" 
 3window.screen.width>800 ? imgheight=100:imgheight=100 
 4function myload() 
 5ExpandedBlockStart.gifContractedBlock.gif
 6if (navigator.appName == "Netscape"
 7ExpandedSubBlockStart.gifContractedSubBlock.gif{document.dangdang.pageY=pageYOffset+window.innerHeight-imgheight; 
 8document.dangdang.pageX=+window.innerWidth-120
 9mymove(); 
10}
 
11else 
12ExpandedSubBlockStart.gifContractedSubBlock.gif
13dangdang.style.top=document.body.scrollTop+document.body.offsetHeight-imgheight; 
14dangdang.style.left=document.body.offsetWidth-120
15mymove(); 
16}
 
17}
 
18function mymove() 
19ExpandedBlockStart.gifContractedBlock.gif
20if(document.ns) 
21ExpandedSubBlockStart.gifContractedSubBlock.gif
22document.dangdang.top=pageYOffset+window.innerHeight-imgheight; 
23document.dangdang.left=pageXOffset+window.innerWidth-120
24setTimeout("mymove();",50
25}
 
26else 
27ExpandedSubBlockStart.gifContractedSubBlock.gif
28dangdang.style.top=document.body.scrollTop+document.body.offsetHeight-imgheight; 
29dangdang.style.left=document.body.scrollLeft+document.body.offsetWidth-120
30setTimeout("mymove();",50
31}
 
32}
 
33
34ExpandedBlockStart.gifContractedBlock.giffunction MM_reloadPage(init) //reloads the window if Nav4 resized 
35ExpandedSubBlockStart.gifContractedSubBlock.gifif (init==truewith (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) 
36document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }
}
 
37else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); 
38}
 
39MM_reloadPage(true
40
41
42
43
44if (navigator.appName == "Netscape"
45ExpandedBlockStart.gifContractedBlock.gif{document.write(""); 
46myload()}
 
47else 
48ExpandedBlockStart.gifContractedBlock.gif
49document.write("
"); 
50myload() 
51}


网页中是这样调用,注意修改 js 文件的路径


上面两段代码中的 src='swf/00001.swf' ,改为自己广告的flash的路径

转载于:https://www.cnblogs.com/X-Jonney/archive/2009/03/17/1414237.html

你可能感兴趣的:(符合标准的对联广告代码)