网站主当接到一个客户的广告,希望能像百度那样只引用一个JS就能实现右下角弹窗广告代码,现HTML580分享用纯JS实现右下角广告代码。
var html580ads={
init:function(title,content){
var text='
'+title+' X
'+'
'
' '+content+
'
'
var thiz=this;
var rootElement = document.body;
thiz.oDiv = document.createElement("div");
thiz.oDiv.id="miaov_float_layer";
thiz.oDiv.style.cssText="border: 1px solid #aaaaaa; display:none;width:250px;";
rootElement.appendChild(thiz.oDiv);
thiz.oDiv.innerHTML=text;
var oBtnMin = document.getElementById('btn_min');
var oBtnClose = document.getElementById('btn_close');
thiz.oDivContent = thiz.oDiv.getElementsByTagName('div')[0];
var iMaxHeight = 0;
var isIE6 = window.navigator.userAgent.match(/MSIE 6/ig)
&& !window.navigator.userAgent.match(/MSIE 7|8/ig);
thiz.oDiv.style.display = 'block';
iMaxHeight = thiz.oDivContent.offsetHeight;
if (isIE6) {
thiz.oDiv.style.position = 'absolute';
thiz.repositionAbsolute();
window.attachEvent('onscroll', function(){
thiz.repositionAbsolute();
});
window.attachEvent('onresize', function(){
thiz.repositionAbsolute();
});
} else {
thiz.oDiv.style.position = 'fixed';
thiz.repositionFixed();
}
oBtnMin.timer = null;
oBtnMin.isMax = true;
oBtnMin.onclick = function() {
thiz.startMove(thiz.oDivContent, (this.isMax = !this.isMax) ? iMaxHeight : 0,
function() {
oBtnMin.className = oBtnMin.className == 'min' ? 'max'
: 'min';
});
};
},
startMove:function(obj, iTarget, fnCallBackEnd) {
if (obj.timer) {
clearInterval(obj.timer);
}
var thiz = this;
obj.timer = setInterval(function() {
thiz.doMove(obj, iTarget, fnCallBackEnd);
}, 30);
},
doMove:function(obj, iTarget, fnCallBackEnd) {
var iSpeed = (iTarget - obj.offsetHeight) / 8;
if (obj.offsetHeight == iTarget) {
clearInterval(obj.timer);
obj.timer = null;
if (fnCallBackEnd) {
fnCallBackEnd();
}
}
else {
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
obj.style.height = obj.offsetHeight + iSpeed + 'px';
(window.navigator.userAgent.match(/MSIE 6/ig) && window.navigator.userAgent
.match(/MSIE 6/ig).length == 2) ? this.repositionAbsolute()
: this.repositionFixed();
}
},
repositionFixed:function () {
this.oDiv.style.right = 0;
this.oDiv.style.bottom = 0;
},
repositionAbsolute:function () {
var left = document.body.scrollLeft || document.documentElement.scrollLeft;
var top = document.body.scrollTop || document.documentElement.scrollTop;
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
this.oDiv.style.left = left + width - this.oDiv.offsetWidth + 'px';
this.oDiv.style.top = top + height - this.oDiv.offsetHeight + 'px';
}
};
window.onload = function() {
html580ads.init('HTML580我帮你广告标题','HTML580用纯JS实现右下角广告代码内容');
}