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

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

WBOY

풀어 주다： 2016-05-16 18:31:48

원래의

1147명이 탐색했습니다.

(기본 페이지는 로딩 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); 
} 
} 

 
샘플 코드: 




코드 복사
 