Home > Web Front-end > JS Tutorial > javascript qq slide-out window in the lower right corner sheyMsg_advertising code

javascript qq slide-out window in the lower right corner sheyMsg_advertising code

WBOY
Release: 2016-05-16 18:31:48
Original
1146 people have browsed it

(The default page will be displayed after 10 seconds of loading, automatically hidden after 30 seconds of display, and can be customized)
09-12-5: Modify the image file, put several backgrounds into one image file, and switch between two types Style style, that is, the blue and red colors of qq
Download the sample source code

Copy the code The code is as follows:

/*
*Author:sohighthesky
*From:http://blog.csdn.net/sohighthesky
*Date:2009-11-9
*/
/ *
*box specifies to display the message box or its id
*options: See the comments in setOptions in the code
*/
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={//Default configuration
showDelay:10,//Display delay
autoHide:30, //Auto-hide time, when set to 0, will not hide automatically
onShow:function(){},//Called after showing
onHide:function(){}//Called after hiding
};
for(var o in options) {
this.options[o]=options[o];
}
},
hide:function() {// Hide
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() {//Show
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 scroll positioning
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";//The width and height can be taken out after displaying
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();//Specify the location when loading
}
o.box.style.display="none";
o.tt=setTimeout(function() {o.show();} ,o.options.showDelay*1000);
}
}

Sample code:
Copy code The code is as follows:




右下角弹出消息






右下角滑出消息


Author:sohighthesky

Date:2009-11-10

style:

showDeplay:

autoHide:







CSDN News




仿腾讯右下角消息提示


showDalay:设置页面加载后显示时间延迟;
autoHide:显示后自动隐藏的时间,默认30秒,设置为0表示不自动隐藏;












打包下载地址 sheyMsg 右下角滑出窗口效果代码
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template