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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
javascript 短路法代码精简
Aug 20 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
ES6中数组array新增方法实例总结
Nov 07 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 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超级全局变量数组小结
2012/10/04 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
基于jquery的分页控件(C#)
2011/01/06 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
微信小程序实现登录注册功能
2020/12/29 Javascript
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
浅述python2与python3的简单区别
2018/09/19 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
python中线程和进程有何区别
2020/06/17 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
华为C++笔试题
2014/08/05 面试题
个人合作协议书范本
2014/04/18 职场文书
环保志愿者活动总结
2014/06/27 职场文书
社区服务标语
2014/07/01 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
python tkinter实现定时关机
2021/04/21 Python