右下隅の javascript qq スライドアウト ウィンドウ sheyMsg_advertising コード

(デフォルトのページは 10 秒の読み込み後に表示され、30 秒の表示後に自動的に非表示になります。カスタマイズ可能です)
09-12-5: 画像ファイルを変更し、複数の背景を 1 つの画像ファイルに入れて切り替えます。 2 つのタイプの間 スタイル スタイル、つまり 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.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() {// Hide
var _top=this.box.clientHeight;
if(/ing$/.test(o. status))return;
o.status="hiding" ;
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"; .display="none";
o.options.onHide ()
}
},5);
show:function() {//Show
var _top=0;
var o=this;
if(/ing$/.test(o.status))return;
o.status="表示中"; tt);
o.box.style.display=" ブロック";
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.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==" show") {
this.box.style.top=this.de.scrollTop this.de.clientHeight-this.box.clientHeight-5 "px ";
} else if(this.status=="非表示") {
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";
bottom=(-this.box.clientHeight-5) "px"; else {
position="絶対";
}
}
this.status="非表示";
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);
}
}


サンプルコード:




コードをコピー


コードは次のとおりです:

右下角滑出消息

Author:sohighthesky

Date:2009-11-10

style: pinkblue

showDeplay:

autoHide:

CSDN News

仿腾讯右下角消息提示

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

查看

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