javascript qq右下角滑出窗口 sheyMsg
程序员文章站
2023-12-01 14:01:10
(默认页面加载10秒后显示，显示30秒后自动隐藏，可自定义配置) 09-12-5： 修改图片文件，将几个背景放到一个图片文件里,并可切换两种样式风格 ，即qq的蓝色和红色 下载示例源码 复制代码 代码...
(默认页面加载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 右下角滑出窗口效果代码
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 右下角滑出窗口效果代码
上一篇： 使vue实现jQuery调用的两种方法
下一篇： java获取web容器地址的方法
推荐阅读
-
javascript qq右下角滑出窗口 sheyMsg
-
javascript实现的仿腾讯QQ窗口抖动效果代码
-
javascript - QQ临时会话窗口能打开，别人也能给我发送信息，但我为什么接收不到
-
javascript qq右下角滑出窗口 sheyMsg_广告代码
-
javascript实现的仿腾讯QQ窗口抖动效果代码
-
js仿QQ中对联系人向左滑动、滑出删除按钮的操作_javascript技巧
-
JS右下角广告窗口代码(可收缩、展开及关闭)_javascript技巧
-
多浏览器支持的右下角浮动窗口_javascript技巧
-
js仿QQ中对联系人向左滑动、滑出删除按钮的操作_javascript技巧