右下角滑出窗口 sheyMsg

sohighthesky

浏览: 35903 次
性别:
来自: 深圳

最近访客更多访客>>

lxny

fcr1209973

foible

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

腾讯 JavaScript CSS IE QQ

在IE Tester V0.4.1 IE6/+,Firefox3.5,Chrome3.0,Opera 9.64以及Safari4.0.3下测试通过

点击运行示例

代码：

(默认页面加载10秒后显示，显示30秒后自动隐藏，可自定义配置)

09-12-5：修改图片文件，将几个背景放到一个图片文件里,并可切换两种样式风格，即qq的蓝色和红色

下载示例源码

/* *Author:sohighthesky *From:http://www.cnblogs.com/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); } }

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>右下角弹出消息</title> <style type="text/css"> /*pre css reset*/ body,th,td {font-size:12px;font-family:Tahoma,Helvetica,Arial,'\5b8b\4f53','\5FAE\8F6F\96C5\9ED1',sans-serif;} body,th,td,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,p {margin:0;padding:0;} fieldset,img { border:none; } a {color:#3366CC; text-decoration:none;outline:none;} a:hover {color:#FF6600;text-decoration:underline;} /************************************************************/ /*sheyMsg style*/ .msg { width:240px;display:none; } .pink .top,.pink .top .title,.pink .top span,.pink .bottom,.pink .bottom a {background:transparent url(../images/sheyMsg/msg_bg_pink.gif) no-repeat 0px 0px;} .pink .center {background:url(../images/sheyMsg/center_bg_pink.gif) repeat-y;} .blue .top,.blue .top .title,.blue .top span,.blue .bottom,.blue .bottom a {background:transparent url(../images/sheyMsg/msg_bg_blue.gif) no-repeat 0px 0px;} .blue .center {background:url(../images/sheyMsg/center_bg_blue.gif) repeat-y;} .msg .top{width:240px;height:25px;position:relative;} .msg .top .title {background-position:-195px -70px;padding-left:30px;line-height:22px;width:100px;height:25px;} .msg .top span {background-position:0px -70px;width:36px; height:17px;position:absolute;top:1px;left:198px;cursor:pointer;} .msg .top span:hover {background-position:-43px -71px;} .msg .center { width:240px;height:115px;} .msg .center h3{color:#0c4e7c;text-align:center;line-height:23px;font-size:13px;} .msg .center p{color: #0c4e7c;margin:0px 10px;line-height:20px;} .msg .bottom {height:29px;background-position:0px -32px;} .msg .bottom a {background-position:-120px -75px;padding-left:20px;margin:7px 10px;float:right;width:30px;height:20px;} /*sheyMsg style end*/ .test dd { line-height:30px;} </style> </head> <body> <div id="div1" style="width:2000px;height:2000px"> <div class="test" style="position:fixed;top:260px;left:200px;_position:absolute"> <dl> <dt><h3><a target="_blank" href="http://blog.csdn.net/sohighthesky/archive/2009/11/10/4795886.aspx">右下角滑出消息</a></h3></dt> <dd>Author:<a href="http://hi.csdn.net/sohighthesky ">sohighthesky</a></dd> <dd>Date:2009-11-10</dd> <dd>style: <input type="radio" value="pink" name="style" id="pink" checked="checked" /><label for="pink">pink</label><input type="radio" value="blue" name="style" id="blue" /><label for="blue">blue</label></dd> <dd>showDeplay:<input type="text" value="2" readonly="readonly"/></dd> <dd>autoHide:<input type="text" id="txtAutoHide" value="30"/><input value="Set" type="button" id="btnSet"/><span id="info" style="color:#FF0000"></span></dd> <dd><input type="button" id="btnControl" value="Show"/></dd> </dl> </div>  <div class="msg pink" id="msgbox"> <div class="top"> <div class="title">CSDN News</div> <span title="close" id="msgclose"></span> </div> <div class="center"> <h3>仿腾讯右下角消息提示</h3> <p>showDalay:设置页面加载后显示时间延迟;<br />autoHide:显示后自动隐藏的时间，默认30秒，设置为0表示不自动隐藏;</p> </div> <div class="bottom"><a target="_blank" href="http://blog.csdn.net/sohighthesky/archive/2009/11/10/4795886.aspx">查看</a> </div> </div>  </div> </body> <script type="text/javascript" src="sheyMsg.js"></script> <script type="text/javascript"> 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(); } </script> </html>

分享到：