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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
Python如何读写字节数据
2020/08/05 Python
pytorch中index_select()的用法详解
2021/01/06 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
酒店行政人事部经理职务说明书
2014/02/26 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
MySQL 数据类型详情
2021/11/11 MySQL
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记