zoukankan      html  css  js  c++  java

  • 符合标准的对联广告代码

    原本工作正常的对联广告突然宣布罢工，为什么？标准化真的那么脆弱吗？"

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

     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">
     6lastScrollY=0;
     7function 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); 
    20window.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>

    那么，为什么小小的标准声明让对联广告无法工作呢？
    问题的根源：
    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">
     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>

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

    网站Flash对联广告源代码：

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


     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;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


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

    Code


    网页中是这样调用,注意修改 js 文件的路径
    <SCRIPT src="js/adver-left.js"></SCRIPT>
    <SCRIPT src="js/adver-right.js"></SCRIPT>
    上面两段代码中的 src='swf/00001.swf' ,改为自己广告的flash的路径
  • 相关阅读:
    SAP dpmon
    SLD Connection Parameters for a Central SLD
    SDN有中文版论坛了
    XI Service Users
    甘特图终极版本 绝对B/S的甘特图经典
    xml文件net操纵类(c#)
    将js文件编译成动态链接库(dll)文件
    文件创建及读取的方法
    只能在执行 Render() 的过程中调用 RegisterForEventValidation(RegisterForEventValidation can only be called during Render()
    ASP.net AJAX置于框架中出现回调
  • 原文地址：https://www.cnblogs.com/cxd4321/p/1523537.html
Copyright © 2011-2022 走看看