[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 是监控用的，因为网站上页面很多，我们需要知道每一个广告是否被正确投放，

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

需要说明的是：

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

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

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