[Javascript] 对联广告代码模板

以前在公司负责广告这块，曾经研究过在Windows/Macintosh下的各种浏览器中的js运行效果，而总结出一些兼容函数。

用在公司网站上之后，没想到居然有幸被用户们拿去当成了范例（现在在网上搜 MK_pageX 应该能找到不少，其中 MK_ 是我的特征前缀，就是 Moky 的缩写，当时是为了避免和原有函数冲突而加的），哈哈～

 

可能和我一贯的编写代码原则有关吧：我一向坚持独立功能独立开发，只要不是特别复杂的东西，尽量不依赖于那些庞大的库。

我的本意是为了让代码更轻便，不过可能也正因为我的代码通常都很简单（而且我奉行 Internet Sharing 精神，从不刻意“保护”自己的代码），

所以比较适合用来教学。

 

既然如此，那我干脆就贴一份最原始的（我看到网上有一些已作了一点小改动，我不知道这样是否更利于学习），

权当是官方版本吧。呵呵

 

我们公司的web广告大体可以分为固定广告（通常是横幅、竖栏之类的iframe广告）和浮动广告（对联、边角漂浮等）。

固定广告没啥好说的，就是嵌个格子，只要把flash的兼容问题搞定就行了。

而浮动广告大同小异，关键是计算窗体大小以及元素坐标问题，最典型的应数对联广告和右下角浮动广告。

 

这里以对联广告为例：

 

/***7 * 对联广告代码-DI (Double Images) * by Moky @ 2006/12/12; */ DI_sLeftImageUrl = "$imagename$"; DI_sRightImageUrl = "$imagename2$"; DI_sClickUrl = "$clickurl$"; DI_sImageUrl = "$imageurl$"; DI_iImageWidth = parseInt("$width$"); if (isNaN(DI_iImageWidth)) DI_iImageWidth = 100; DI_iImageHeight = parseInt("$height$"); if (isNaN(DI_iImageHeight)) DI_iImageHeight = 300; DI_iMinWindowWidth = 786 + DI_iImageWidth * 2; /* avoid covering the web content */ DI_iTop = 17; DI_iLeft = 10; DI_iRight = 12; DI_iTimeout = 500; DI_blClosed = false; /*---- common codes begin ----*/ var __bs__ = navigator.userAgent.indexOf("MSIE") > 0 ? "MSIE" : navigator.userAgent.indexOf("Safari") > 0 ? "Safari" : "others"; var __dt__ = (document.documentElement.clientHeight > 0) && (__bs__ == "MSIE" || document.body.clientHeight > document.documentElement.clientHeight) ? "W3C" : "undefined"; function MK_pageY() { if (__bs__ == "MSIE") { if (__dt__ == "W3C") return document.documentElement.scrollTop; else return document.body.scrollTop; } else { return window.pageYOffset; } } function MK_pageX() { if (__bs__ == "MSIE") { if (__dt__ == "W3C") return document.documentElement.scrollLeft; else return document.body.scrollLeft; } else { return window.pageXOffset; } } function MK_pageH() { if (__bs__ == "Safari") return window.innerHeight; else if (__dt__ == "W3C") return document.documentElement.clientHeight; else return document.body.clientHeight; } function MK_pageW() { if (__bs__ == "Safari") return window.innerWidth; else if (__dt__ == "W3C") return document.documentElement.clientWidth; else return document.body.clientWidth; } function MK_posY(o, v) { if (!o || !o.style) return ; if (v) { o.style.top = parseInt(v) + "px"; } else { return o.style.top; } } function MK_posX(o, v) { if (!o || !o.style) return ; if (v) { o.style.left = parseInt(v) + "px"; } else { return o.style.left; } } function MK_makeAdFodderHTML(sImageUrl, sImageName, iWidth, iHeight) { var _src = sImageUrl == "" ? sImageName : sImageUrl; return (!_src.match(//.swf$/gi)? '<img src="$src$" mce_src="$src$" height="$height$" width="$width$" border="0" />' : '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"' + ' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0"' + ' height="$height$" width="$width$">/n' + '<param name="movie" value="$src$" />/n' + '<param name="quality" value="high" />/n' + '<param name="wmode" value="opaque" />/n' + '<embed height="$height$" width="$width$"' + ' src="$src$" mce_src="$src$" quality="high" wmode="opaque"' + ' type="application/x-shockwave-flash" pluginspace="http://www.macromedia.com/go/getflashplayer">' + '</embed>' + '</object>') .replace(//$src/$/gi, _src).replace(//$height/$/gi, iHeight).replace(//$width/$/gi, iWidth); } /*---- common codes end ----*/ function closead() { DI_blClosed = true; DI_Hide(); } function DI_Hide() { try { document.getElementById('DI_LDiv').style.display = 'none'; document.getElementById('DI_RDiv').style.display = 'none'; } catch(e) {} } function JsCloseDAD() { closead(); return false ; } function DI_Show() { if (DI_blClosed) return; try { document.getElementById('DI_LDiv').style.display = 'block'; document.getElementById('DI_RDiv').style.display = 'block'; } catch(e) {} } function DI_Load() { var style_class ; /* try { if (__bs__ == "MSIE") document.styleSheets[0].addRule('.div_floating_ad', 'position:absolute'); else document.styleSheets[0].insertRule('.div_floating_ad {position:absolute}', document.styleSheets[0].cssRules.length); style_class = 'class="div_floating_ad" style="display:none; float:none; border:1px solid #cccccc; background:#eeeeee;"'; } catch(e) {*/ style_class = 'style="position:absolute; display:none; float:none; border:1px solid #cccccc; background:#eeeeee;"'; /* }*/ var _temp = '<div id="$div_id$" ' + style_class + '>/n' + ' <div style="float:none;" mce_style="float:none;"><a href="$js_ad_click$" mce_href="$js_ad_click$" target="_blank">$js_ad_content$</a></div>/n' + ' <div style="float:none; text-align:right;" mce_style="float:none; text-align:right;"><img style="cursor:pointer;" mce_style="cursor:pointer;" src="http://adsfile.qq.com/web/db_close.gif" mce_src="http://adsfile.qq.com/web/db_close.gif" onClick="javascript:JsCloseDAD();"></div>/n' + '</div>/n'; var _lcon = MK_makeAdFodderHTML(DI_sImageUrl, DI_sLeftImageUrl, DI_iImageWidth, DI_iImageHeight); var _rcon = MK_makeAdFodderHTML(DI_sImageUrl, DI_sRightImageUrl, DI_iImageWidth, DI_iImageHeight); var _lstr = _temp.replace(//$js_ad_click/$/gi, DI_sClickUrl) .replace(//$div_id/$/gi, 'DI_LDiv').replace(//$js_ad_content/$/gi, _lcon); var _rstr = _temp.replace(//$js_ad_click/$/gi, DI_sClickUrl) .replace(//$div_id/$/gi, 'DI_RDiv').replace(//$js_ad_content/$/gi, _rcon); document.writeln(_lstr); document.writeln(_rstr); setInterval("DI_Move();", DI_iTimeout); } function DI_Move() { if(MK_pageW() < DI_iMinWindowWidth) { DI_Hide(); return; } DI_Show(); try { var ldiv = document.getElementById('DI_LDiv'); MK_posY(ldiv, DI_iTop); MK_posX(ldiv, DI_iLeft); var rdiv = document.getElementById('DI_RDiv'); MK_posY(rdiv, DI_iTop); MK_posX(rdiv, MK_pageX() + MK_pageW() - DI_iImageWidth - DI_iRight); } catch(e) {} } /* start */ DI_Load(); document.write('<img src="$moniurl$" mce_src="$moniurl$" width="0" height="0" style="width:0px; height:0px; visibility:hidden; display:none; " />');  

 

这里的 DI_ 前缀是“对联”（Double Images）的意思，是为了避免和页面上其他类型广告代码冲突而加的前缀。

两个 $ 符号以及其中的字符串是模板变量标签，使用时请用程序替换成相应的值。

最后面那个 0x0 的 image 是监控用的，因为网站上页面很多，我们需要知道每一个广告是否被正确投放，

并且这个检查工作是由程序自动执行的。

 

需要说明的是：

该代码只有在浏览器窗口足够大的时候才呈现对联广告，目的是避免对联遮挡页面内容，影响用户体验。

 

 

 

另外，我还曾研究出如何令当时浏览器上流行的“屏蔽浮动广告”功能失效的办法，不过考虑到那样很伤害用户体验，

出于尊重用户的考虑，所以一直没用，也就不说了。