javascript qq右下角滑出窗口 sheyMsg


Posted in Javascript onMarch 21, 2010

(默认页面加载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); 
} 
}

示例代码:
<!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> 
<!--sheyMsg start--> 
<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> 
<!--sheyMsg end--> 
</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>

打包下载地址 sheyMsg 右下角滑出窗口效果代码
Javascript 相关文章推荐
JavaScript confirm选择判断
Oct 18 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
详解javascript事件冒泡
Jan 09 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
js 居中漂浮广告
Mar 21 #Javascript
jquery checkbox,radio是否选中的判断代码
Mar 20 #Javascript
javascript中的new使用
Mar 20 #Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 #Javascript
js 格式化时间日期函数小结
Mar 20 #Javascript
window.location.hash 属性使用说明
Mar 20 #Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 #Javascript
You might like
PHP求最大子序列和的算法实现
2011/06/24 PHP
深入php之规范编程命名小结
2013/05/15 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
Python多线程下载文件的方法
2015/07/10 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
python实现感知器算法详解
2017/12/19 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
Python 变量类型详解
2018/10/10 Python
python实现文本界面网络聊天室
2018/12/12 Python
Python读写文件基础知识点
2019/06/10 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
Python 高效编程技巧分享
2020/09/10 Python
Python实现区域填充的示例代码
2021/02/03 Python
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
优秀学生干部主要事迹材料
2015/11/04 职场文书
工作自我评价范文
2019/03/21 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
vue封装数字翻牌器
2022/04/20 Vue.js