javascript qq右下角滑出窗口 sheyMsg
更新時(shí)間：2010年03月21日 11:43:03 作者：
在IE Tester V0.4.1 IE6/+,Firefox3.5,Chrome3.0,Opera 9.64以及Safari4.0.3下測試通過的qq 右下角
(默認(rèn)頁面加載10秒后顯示，顯示30秒后自動隱藏，可自定義配置)
09-12-5： 修改圖片文件，將幾個(gè)背景放到一個(gè)圖片文件里,并可切換兩種樣式風(fēng)格 ，即qq的藍(lán)色和紅色
下載示例源碼
/*
*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={//默認(rèn)配置
showDelay:10,//顯示延時(shí)
autoHide:30,//自動隱藏時(shí)間，設(shè)置為0時(shí)，不自動隱藏
onShow:function(){},//顯示后調(diào)用
onHide:function(){}//隱藏后調(diào)用
};
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();//加載時(shí)指定位置
}
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" >右下角滑出消息</a></h3></dt>
<dd>Author:<a >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:設(shè)置頁面加載后顯示時(shí)間延遲;<br />autoHide:顯示后自動隱藏的時(shí)間，默認(rèn)30秒，設(shè)置為0表示不自動隱藏;</p>
</div>
<div class="bottom"><a target="_blank" >查看</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="隱藏時(shí)間已設(shè)置,下一次show時(shí)生效";
setTimeout("g('info').innerHTML='';",3000);
}
}
g("msgclose").onclick=function() {//hide
msg.hide();
}
</script>
</html>
打包下載地址 sheyMsg 右下角滑出窗口效果代碼
09-12-5： 修改圖片文件，將幾個(gè)背景放到一個(gè)圖片文件里,并可切換兩種樣式風(fēng)格 ，即qq的藍(lán)色和紅色
下載示例源碼
復(fù)制代碼 代碼如下:
/*
*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={//默認(rèn)配置
showDelay:10,//顯示延時(shí)
autoHide:30,//自動隱藏時(shí)間，設(shè)置為0時(shí)，不自動隱藏
onShow:function(){},//顯示后調(diào)用
onHide:function(){}//隱藏后調(diào)用
};
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();//加載時(shí)指定位置
}
o.box.style.display="none";
o.tt=setTimeout(function() {o.show();},o.options.showDelay*1000);
}
}
示例代碼：
復(fù)制代碼 代碼如下:
<!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" >右下角滑出消息</a></h3></dt>
<dd>Author:<a >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:設(shè)置頁面加載后顯示時(shí)間延遲;<br />autoHide:顯示后自動隱藏的時(shí)間，默認(rèn)30秒，設(shè)置為0表示不自動隱藏;</p>
</div>
<div class="bottom"><a target="_blank" >查看</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="隱藏時(shí)間已設(shè)置,下一次show時(shí)生效";
setTimeout("g('info').innerHTML='';",3000);
}
}
g("msgclose").onclick=function() {//hide
msg.hide();
}
</script>
</html>
打包下載地址 sheyMsg 右下角滑出窗口效果代碼
您可能感興趣的文章:
- JS右下角廣告窗口代碼(可收縮、展開及關(guān)閉)
- js右下角彈出窗口,點(diǎn)擊可關(guān)閉效果
- js實(shí)現(xiàn)右下角窗口彈出窗口效果
- js窗口關(guān)閉提示信息（兼容IE和firefox）
- JavaScript關(guān)閉當(dāng)前頁面(窗口)不帶任何提示
- 不提示直接關(guān)閉網(wǎng)頁窗口的JS示例代碼
- 打開新窗口關(guān)閉當(dāng)前頁面不彈出關(guān)閉提示js代碼
- IE JS無提示關(guān)閉窗口不提示的方法
- IE,firefox(火狐)瀏覽器無提示關(guān)閉窗口js實(shí)現(xiàn)代碼小結(jié)
- javascript 無提示關(guān)閉窗口腳本
- IE6、IE7、Firefox javascript 無提示關(guān)閉窗口的代碼
- JavaScript無提示關(guān)閉窗口(兼容IE/Firefox/Chrome)
- JS實(shí)現(xiàn)簡單的右下角彈出提示窗口完整實(shí)例
相關(guān)文章
在藍(lán)色理想論壇里看到了wuleying貼出的一段代碼，可以實(shí)現(xiàn)網(wǎng)易首頁頂部慢慢展開再慢慢收起的廣告效果，非常不錯(cuò)，轉(zhuǎn)過來與大家分享。2008-04-04
js退彈 IE關(guān)閉時(shí)彈出廣告代碼,可以防止屏蔽
IE廣告防屏蔽代碼.目前能過大多數(shù)基于IE內(nèi)核的瀏覽器. 至于他非IE瀏覽器就可以忽略了.2008-07-07
這個(gè)代碼方便隨機(jī)出現(xiàn)廣告，2008-07-07
漂亮的js tab圖片輪換效果代碼(可自定義的幻燈片和圖片緩沖切換)
偶然瀏覽網(wǎng)上發(fā)現(xiàn)一款非常漂亮的幻燈片效果代碼，特給大家整理了下，非常漂亮的tab 幻燈片效果代碼，里面是js類實(shí)現(xiàn)的，可以修改2008-12-12
我在 IE8 中測試起作用，但在 Firefox 3.5 中被攔截。2010-03-03
彈出廣告特效代碼(一個(gè)IP只彈出一次)...2007-05-05![兼容多瀏覽器的JS 浮動廣告[推薦]](http://img.jbzj.com/images/xgimg/bcimg6.png)
很平滑自動適應(yīng)屏幕分辨率的浮動廣告效果，顯示在Flash之上，不被任何風(fēng)頁元素遮擋，同時(shí)可以支持多個(gè)圖片漂浮，速度和浮動隨機(jī)位置都感覺不錯(cuò)。2009-10-10
對聯(lián)廣告...2006-09-09
javascript 新浪背投廣告實(shí)現(xiàn)代碼
新浪的好多廣告代碼被廣大站長廣為流傳，大家如果有時(shí)間可以去看看，他們的代碼都是寫出類的，不少的好東西。2009-07-07
一般需要退彈別人的網(wǎng)站，用下面的代碼即可解決這個(gè)問題2008-06-06