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 相关文章推荐
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 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
Thinkphp中Create方法深入探究
2014/06/16 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
PHP微商城开源代码实例
2019/03/27 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
js replace 与replaceall实例用法详解
2013/08/03 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
详解JS预解析原理
2020/06/16 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
大学生的网上创业计划书
2013/12/31 职场文书
小学生家长评语大全
2014/02/10 职场文书
导游个人求职信
2014/04/25 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
python用tkinter开发的扫雷游戏
2021/06/01 Python