找回密码
 注册

QQ登录

只需一步,快速开始

查看: 43037|回复: 43

符合标准的对联广告代码

[复制链接]
发表于 2006-5-10 12:54:00 | 显示全部楼层 |阅读模式
“原本工作正常的对联广告突然宣布罢工,为什么?标准化真的那么脆弱吗?"

老实说我不是很喜欢对联广告,呵呵。可是总有人提出这样的要求,所以这个还是有些意义的,闲话少说,进入正题。

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

 提示:您可以先修改部分代码再运行


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


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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
复制代码

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

 提示:您可以先修改部分代码再运行



那么,为什么小小的标准声明让对联广告无法工作呢?

问题的根源:
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”,这就是我所说的特殊情况。

怎么解决?
将第一段代码做一些修改:

  1. var diffY;
  2. if (document.documentElement && document.documentElement.scrollTop)
  3.         diffY = document.documentElement.scrollTop;
  4. else if (document.body)
  5.         diffY = document.body.scrollTop
  6. else
  7.     {/*Netscape stuff*/}
复制代码


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

 提示:您可以先修改部分代码再运行



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

大家可以上我的个人blog和我讨论:残缺 完美 生活——网页设计的试验田

参考网址:
http://forums.digitalpoint.com/showthread.php?t=11965
http://www.quirksmode.org/js/doctypes.html

评分

参与人数 1威望 +1 收起 理由
经典论坛大妈 + 1 历史打分

查看全部评分

发表于 2006-5-10 16:30:00 | 显示全部楼层
这个确实不错,但是能告知具体的调用方式吗?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-5-10 16:42:00 | 显示全部楼层
??不是写得很清楚了吗?以前是怎么调用的现在还怎么调用啊。
回复 支持 反对

使用道具 举报

发表于 2006-5-10 17:15:00 | 显示全部楼层
请问楼主如果将 AD1 或 AD2 换成一个表格怎么做,如:我把右边的广告变为一个在线客服的工具栏,能够赐教一下吗?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-5-10 17:36:00 | 显示全部楼层
我那左右两个div是通过js输出的,你可以直接在html定义写两个div并赋予相应的id即可。当然,js里面的输出语句就不要了。
看这个:

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2006-5-10 18:50:00 | 显示全部楼层
虽然论坛已经有了很多类似讨论,但是楼主的钻研精神和乐于分享的态度值得鼓励,打上1分不要嫌少,呵呵
回复 支持 反对

使用道具 举报

发表于 2006-5-11 09:44:00 | 显示全部楼层
多谢楼主,真的不错,也别怪我菜,请问是不是将代码另存为JS文件,然后在有需要的地方调用? 还是直接写在网页中。如果有空请答复一下。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-5-11 11:54:00 | 显示全部楼层
都可以。
谢谢斑竹鼓励。
回复 支持 反对

使用道具 举报

发表于 2006-5-21 10:46:00 | 显示全部楼层
问一下...如果把上面这种对联广告代码存为一个JS文件..然后在主页中直接调用呀..
             还有就是在什么地方可以改变链接对象的路径呀..如果我想用JPG图片作对联广告   怎么改
           如果想要以FLASH动画做对联广告又怎么做呀..


                       希望有人能回复一下....谢谢~!
回复 支持 反对

使用道具 举报

发表于 2006-5-21 19:11:00 | 显示全部楼层
原帖这么好。。。。就没有人能帮我一下吗《》???

    楼主。。。高手们。。。经典的朋友 555555555
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-5-22 09:42:00 | 显示全部楼层
请看5楼。
回复 支持 反对

使用道具 举报

发表于 2006-5-22 17:20:00 | 显示全部楼层
555555555555


remain   JS我看不懂呀....
回复 支持 反对

使用道具 举报

发表于 2006-5-22 17:24:00 | 显示全部楼层
看不懂请去学习,谢谢
回复 支持 反对

使用道具 举报

发表于 2006-5-23 17:14:00 | 显示全部楼层
我想把上面这个对联广告中的ad1  ad2  换成我自己的FLASH动画..怎么换呀..我用的是<img>
         可不成功...
                 能教一下我吗>????
回复 支持 反对

使用道具 举报

发表于 2006-5-25 08:27:00 | 显示全部楼层
我想把上面这个对联广告中的ad1 ad2 换成我自己的FLASH动画..怎么换呀..我用的是<img>
可不成功...
能教一下我吗>????
回复 支持 反对

使用道具 举报

发表于 2006-5-26 16:31:00 | 显示全部楼层
插动画不能用img标签,建议加强学习.

或在dw里插入flash一次看看代码.
回复 支持 反对

使用道具 举报

发表于 2006-5-27 08:37:00 | 显示全部楼层
楼上的兄弟..  可能是我打错了..我的本意不是说插入FLASH  而是用img插入图片..

但我在DW中跟本就不能插入..因为上面的对联广告是在<head></head>中加载的....在DW中跟本看不到...

   望能指教`!!!!!!!!!!!!!!!!!
回复 支持 反对

使用道具 举报

发表于 2006-5-27 11:26:00 | 显示全部楼层
好,多谢楼主!
回复 支持 反对

使用道具 举报

发表于 2006-5-27 12:06:00 | 显示全部楼层
不错 加上 声明之后
滚动条颜色 也不能使用了
回复 支持 反对

使用道具 举报

发表于 2006-5-27 12:12:00 | 显示全部楼层
收藏这个 改天再研究一下 滚动条颜色的问题吧
回复 支持 反对

使用道具 举报

发表于 2006-5-27 16:31:00 | 显示全部楼层

 提示:您可以先修改部分代码再运行



代码的效果: http://www.kx3xia.com


上面这段代码也是一个对联广告代码。。。但我不能实现在1024和比1024更大的分辨率下使广告对齐居中于   “网页与窗口左右边缘之间”  

          望能指教
回复 支持 反对

使用道具 举报

发表于 2006-12-21 13:42:54 | 显示全部楼层

help

面的对联广告就这样运行是完全可以的,但是为什么我把ad1  ad2  

换成我自己的图片就不行了呢,到底是哪出了问题啊?能否赐教啊?

拜托了!!
         帮我把上面的例子再改一下,换成插图片的行不行啊?
回复 支持 反对

使用道具 举报

发表于 2006-12-27 08:53:14 | 显示全部楼层
为什么本人用 Maxthon浏览器,没有效果
回复 支持 反对

使用道具 举报

发表于 2006-12-27 16:59:54 | 显示全部楼层

能不能再加个关闭,谢谢

能不能再加个关闭,谢谢
回复 支持 反对

使用道具 举报

发表于 2006-12-27 20:43:07 | 显示全部楼层
收藏了!以后会有用到的!谢谢!
回复 支持 反对

使用道具 举报

发表于 2007-1-28 13:21:52 | 显示全部楼层
怎么把对联显示的变成<iframe>代码显示的效果呢?
回复 支持 反对

使用道具 举报

发表于 2007-4-1 10:00:42 | 显示全部楼层
正好这几天正为这个烦恼呢。。楼主算给我解了闷了,谢谢楼主
回复 支持 反对

使用道具 举报

发表于 2007-4-2 10:03:31 | 显示全部楼层
麻烦楼主了
回复 支持 反对

使用道具 举报

发表于 2008-5-22 13:41:03 | 显示全部楼层
谢谢,正是我需要的,尽管帖子很老了


留个脚印...
回复 支持 反对

使用道具 举报

发表于 2009-5-18 12:23:36 | 显示全部楼层

不错 解决了

楼主将的很不错 虽然帖子很老了 还是多多学写了  呵呵
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备19000417号-2 )

GMT+8, 2021-12-4 01:23 , Processed in 0.081991 second(s), 12 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表