javascript qq slide-out window in the lower right corner sheyMsg_advertising code

(The default page will be displayed after 10 seconds of loading, automatically hidden after 30 seconds of display, and can be customized)
09-12-5: Modify the image file, put several backgrounds into one image file, and switch between two types Style style, that is, the blue and red colors of qq
Download the sample source code

Copy the code The code is as follows:

/*
*Author:sohighthesky
*From:http://blog.csdn.net/sohighthesky
*Date:2009-11-9
*/
/ *
*box specifies to display the message box or its id
*options: See the comments in setOptions in the code
*/
var sheyMsg=function(box,options) {
this. box=this.g(box);
this.setOptions(options);
this.init();
}
sheyMsg.prototype={
ae:function(e,call ) {
if(window.addEventListener)window.addEventListener(e,call,false);
else window.attachEvent("on" e,call);
},
g:function( id) {return typeof(id)=="string"?document.getElementById(id):id; },
isFixed:!window.ActiveXObject || (navigator.userAgent.indexOf("MSIE 6")== -1 && document.compatMode=="CSS1Compat"),
setOptions:function(options) {
this.options={//Default configuration
showDelay:10,//Display delay
autoHide:30, //Auto-hide time, when set to 0, will not hide automatically
onShow:function(){},//Called after showing
onHide:function(){}//Called after hiding
};
for(var o in options) {
this.options[o]=options[o];
}
},
hide:function() {// Hide
var _top=this.box.clientHeight;
var o=this;
if(/ing$/.test(o.status))return;
o.status="hiding" ;
clearTimeout(o.tt);
o.t=setInterval(function() {
if(o.isFixed)
o.box.style.bottom=(-o.box.clientHeight ( --_top)) 'px';
else
o.box.style.top=o.de.scrollTop o.de.clientHeight-5-(--_top) "px";
if (_top==-5) {
clearInterval(o.t);
o.status="hide";
o.box.style.display="none";
o.options.onHide ();
}
},5);
},
show:function() {//Show
var _top=0;
var o=this;
if(/ing$/.test(o.status))return;
o.status="showing";
clearTimeout(o.tt);
o.box.style.display=" block";
o.t=setInterval(function() {
if(o.isFixed)
o.box.style.bottom=(-o.box.clientHeight ( _top)) "px";
else
o.box.style.top=(o.de.scrollTop o.de.clientHeight-5-( _top)) "px";
if(_top==o.box.clientHeight) {
clearInterval(o.t);
o.status="show";
o.options.onShow();
var h=o.options.autoHide-0;
if( h) o.tt=setTimeout(function() {o.hide();},h*1000);
}
},1);
},
fixIE6:function() {//IE6 scroll positioning
this.box.style.left=this.de.scrollLeft this.de.clientWidth-this.box.clientWidth-2 "px";
if(this.status==" show") {
this.box.style.top=this.de.scrollTop this.de.clientHeight-this.box.clientHeight-5 "px";
} else if(this.status==" hide") {
this.box.style.top=this.de.scrollTop this.de.clientHeight 5 "px";
}
},
init:function() {
with(this.box.style) {
display="block";//The width and height can be taken out after displaying
if(this.isFixed) {
position="fixed";
right="2px";
bottom=(-this.box.clientHeight-5) "px";
} else {
position="absolute";
}
}
this.status="hide";
var o=this;
if(!this.isFixed) {
o.de=document.compatMode=="CSS1Compat"?document.documentElement:document. body;
var timer;
this.ae("resize",function() { clearTimeout(timer);timer=setTimeout(function(){o.fixIE6.call(o)},30);} );
this.ae("scroll",function() { clearTimeout(timer);timer=setTimeout(function(){o.fixIE6.call(o)},30);});
this .fixIE6();//Specify the location when loading
}
o.box.style.display="none";
o.tt=setTimeout(function() {o.show();} ,o.options.showDelay*1000);
}
}

Sample code:

Copy code The code is as follows:

右下角滑出消息

Author:sohighthesky

Date:2009-11-10

style: pinkblue

showDeplay:

autoHide:

CSDN News

仿腾讯右下角消息提示

showDalay:设置页面加载后显示时间延迟;
autoHide:显示后自动隐藏的时间，默认30秒，设置为0表示不自动隐藏;

查看

打包下载地址 sheyMsg 右下角滑出窗口效果代码