오른쪽 하단 모서리에 있는 javascript qq 슬라이드 아웃 창 sheyMsg_advertising 코드

(기본 페이지는 로딩 10초 후에 표시되며, 표시 30초 후에 자동으로 숨겨지며 사용자 정의 가능)
09-12-5: 이미지 파일 수정, 여러 배경을 하나의 이미지 파일에 넣고 전환 두 가지 유형 사이의 스타일 스타일, 즉 qq의 파란색과 빨간색
샘플 소스 코드 다운로드

코드 복사 코드는 다음과 같습니다.

/*
*저자:sohighthesky
*출처:http://blog.csdn.net/sohighthesky
*날짜:2009- 11-9
*/
/ *
*box는 메시지 상자 또는 해당 ID를 표시하도록 지정합니다.
*options: 코드
*/
var에서 setOptions의 주석을 참조하세요. sheyMsg=function(box,options) {
this.box=this.g(box);
this.setOptions(options)
this.init(); .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() {//Show
var _top=0; var o=this;
if(/ing$/.test(o.status))return;
o.status="showing"; tt);
o.box.style.display=" block";
o.t=setInterval(function() {
if(o.isFixed)
o.box.style.bottom=( -o.box.clientHeight ( _top)) "px";
else
o.de.scrollTop o.de.clientHeight-5-( _top)) "px" ;
if(_top==o.box.clientHeight) {
clearInterval(o.t)
o.status="show"
o.options.onShow(); 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==" 표시") {
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 타이머;
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);
}
}


샘플 코드:




코드 복사

코드는 다음과 같습니다.

右下角滑出消息

Author:sohighthesky

Date:2009-11-10

style: pinkblue

showDeplay:

autoHide:

CSDN News

仿腾讯右下角消息提示

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

查看

打包下载地址 sheyMsg 右下角滑出窗口效果代码