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学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
jQuery表单验证之密码确认
May 22 jQuery
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 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实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
js数组操作学习总结
2013/11/04 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
Python实现完整的事务操作示例
2017/06/20 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
行政前台岗位职责
2013/12/04 职场文书
周鸿祎:教你写创业计划书
2013/12/30 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
委托书的样本
2015/01/28 职场文书
父亲去世追悼词
2015/06/23 职场文书
2016年寒假家长评语
2015/10/10 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书