(默认页面加载10秒后显示，显示30秒后自动隐藏，可自定义配置)
09-12-5： 修改图片文件，将几个背景放到一个图片文件里,并可切换两种样式风格 ，即qq的蓝色和红色
下载示例源码
代码如下:
/*
*Author:sohighthesky
*From:http://blog.csdn.net/sohighthesky
*Date:2009-11-9
*/
/*
*box 指定要显示消息框或者其id
*options:参见代码中setOptions中的注释
*/
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={//默认配置
showDelay:10,//显示延时
autoHide:30,//自动隐藏时间，设置为0时，不自动隐藏
onShow:function(){},//显示后调用
onHide:function(){}//隐藏后调用
};
for(var o in options) {
this.options[o]=options[o];
}
},
hide:function() {//隐藏
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() {//显示
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 滚动定位
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";//显示之后才能取出宽度和高度
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();//加载时指定位置
}
o.box.style.display="none";
o.tt=setTimeout(function() {o.show();},o.options.showDelay*1000);
}
}

示例代码：
代码如下:

右下角滑出消息

Author:sohighthesky
Date:2009-11-10
style: pinkblue
showDeplay:
autoHide:






CSDN News

仿腾讯右下角消息提示

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

查看







var g=function(id){return document.getElementById(id)};
var msg=new sheyMsg("msgbox",{
showDelay:2,//
onHide:function(){
btn.value="Show";
},
onShow:function() {
btn.value="Hide";
}
});
g("pink").onclick=g("blue").onclick=function() {//switch style
g("msgbox").className="msg "+this.value;
}
var btn=g("btnControl");
btn.onclick=function() {//show or hide
if(this.value=="Show")
msg.show();
else
msg.hide();
}
g("btnSet").onclick=function() {//set autoHide
var v=g("txtAutoHide").value;
if(!isNaN(v)) {
msg.options.autoHide=v-0;
g("info").innerHTML="隐藏时间已设置,下一次show时生效";
setTimeout("g('info').innerHTML='';",3000);
}
}
g("msgclose").onclick=function() {//hide
msg.hide();
}



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

下载本文