【Javascript】跨浏览器兼容的浮动图片广告

本来觉得网页上飘着图片广告是件很挫的事，结果这两天遇到有这样的需求的，个么就来search一下。代码如下：

<div id="img" style="LEFT:0px; visibility=hidden;POSITION:absolute; TOP:0px"> <a href="http://witmax.cn" target="_blank"> <img border=0 src="http://witmax.cn/img/logo.png" width=190 height=40> </a> </div> <script language="javascript">  </script>

提示：你可以先修改部分代码再运行。

直接保存成ad.html，在firefox和ie下看都没问题。但放到自己的网页里发现不对了，FF下出不来结果。发现是网页前加了doctype造成的，修改了两处：

Firefox中DOM对象需要用document.getElementById()来获得
Firefox中element.style.left属性所赋予的值需要带"px"

改完后发现图片浮动是根据网页实际高度来的，不太合理，改为按浏览器窗口来浮动，将document.body.clientHeight改为document.documentElement.clientHeight，width对应修改。更多clientHeight的介绍可参阅《clientHeight、offsetHeight、scrollHeight对比测试分析》。

修改完毕，拿IE6/IE7/IE8/Firefox/Opera/Chrome/Safari来测试一下，都没问题。

上修改后的代码：

<!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>枫芸志 » DEMO » 浮动图片广告</title> </head> <body> 浮动图片广告 <a href="http://witmax.cn">晴枫</a>制作已测试浏览器：IE6/IE7/IE8/Firefox/Opera/Chrome/Safari <div id="img" style="LEFT:20px; visibility:hidden;POSITION:absolute; TOP:20px;"> <a href="http://witmax.cn" target="_blank"> <img border=0 src="http://witmax.cn/img/logo.png" width="190px" height="40px"> </a> </div> <script language="javascript">  </script> </body> </html>

提示：你可以先修改部分代码再运行。

[完毕]

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自枫芸志，原文地址《【Javascript】跨浏览器兼容的浮动图片广告》

标签： Javascript

枫芸志

枫芸志

【Javascript】跨浏览器兼容的浮动图片广告

已经有1 条评论抢在你前面了~

点击这里取消回复。