[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;elsereturn document.body.scrollTop;} else {return window.pageYOffset;}}function MK_pageX() {if (__bs__ == "MSIE") {if (__dt__ == "W3C")return document.documentElement.scrollLeft;elsereturn document.body.scrollLeft;} else {return window.pageXOffset;}}function MK_pageH() {if (__bs__ == "Safari")return window.innerHeight;else if (__dt__ == "W3C")return document.documentElement.clientHeight;elsereturn document.body.clientHeight;}function MK_pageW() {if (__bs__ == "Safari")return window.innerWidth;else if (__dt__ == "W3C")return document.documentElement.clientWidth;elsereturn 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');elsedocument.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 是监控用的，因为网站上页面很多，我们需要知道每一个广告是否被正确投放，

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

 

需要说明的是：

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

 

 

 

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

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