Baidu スペース ポップアップ効果分析_JavaScript スキル

Firefox ブラウザを使い始めて以来、学習のために WebDeveloper を使用して美しい Web サイトの JS と CSS をダウンロードして分析するのがほぼ習慣になりました。

Baidu Space のポップアップ ウィンドウとドラッグ アンド ドロップの効果は非常に優れています。現在、多くの有名な Web サイトがこのテクノロジーを使用しています。以下に私が作成した JS コードを一部分析しましたが、まだ理解できない点がたくさんありますので、専門家に説明していただければ幸いです。初心者なので間違っていたら教えてください。
断っておきますが、このコードは学習のみを目的としており、技術的な著作権は Baidu に属します。
主に次のように呼ばれるファイル:popup.js:
/**//*********************************************** ポップアップ.js*********************************************** **/
//プッシュ メソッドを配列に追加します。 Array
//プッシュ メソッドを配列に追加します。配列の終わり Object
if(!Array.prototype.push)
{
Array.prototype.push=function ()
{
var startLength=this.length
for(var i =0;i {
this[startLength i]=arguments[i]
}
return this.length; } 🎜> };

//G 関数のパラメータを処理します
function G()
{
//パラメータを保存する配列を定義します
var elements=new Array ();
//G のパラメータの内容を分析するループ
for(var i=0;i {
var element=arguments[i];

//パラメータの型が文字列の場合、このパラメータを ID として持つオブジェクトを取得します
if(typeof element=='string')
{
element=document.getElementById( element);
}
//パラメータの長さが 1 の場合
if(arguments.length==1)
{
return element;
}
/ / 配列の最後にオブジェクトを追加します。
elements.push(element);
return elements;

Function.prototype.bind=function (オブジェクト)
{
var __method=this;
return function ()
{
__method.apply(object,arguments) };
//イベントをバインド
Function.prototype.bindAsEventListener=function (object)
{
var __method=this;
return function (event){__method.call(object,event|| window.event);};
};


Object.extend=function (destination,source)
{
for(source のプロパティ)
{
宛先[プロパティ]=ソース[プロパティ ];
宛先を返します

}; var Event=new Object();

Object.extend(
イベント,

{
オブザーバー:false,
要素:関数 (イベント) )
{
returnevent.target||event.srcElement;
},

isLeftClick:function (event)
{
return (((event.that) &&(event.that==1) )||((event.button)&&(event.button==1)));
},

pointerX:function (event)
{
returnevent.pageX|(event.clientX (document.documentElement.scrollLeft||document.body.scrollLeft));
},

pointerY:function (event)
{
returnevent.pageY|(event.clientY (document.documentElement.scrollTop||document.body.scrollTop));

stop:function (event)
{
if(event.preventDefault )
{
イベント.preventDefault();
イベント.stopPropagation()
}
else
{
イベント.returnValue =false;
イベント.キャンセルバブル =true;
},

findElement:function (イベント,タグ名)
{
var element=Event.element(イベント);
while(element .parentNode&&(!element.tagName||(element.tagName.toUpperCase()!=tagName.toUpperCase()))
element=element.parentNode
return element; ;
},

_observeAndCache:function (要素,名前,オブザーバー,useCapture)
{
if(!this.observers)
this.observers=[]; > if(element.addEventListener)
{
this.observers.push([element,name,observer,useCapture]);
element.addEventListener(name,observer,useCapture);
🎜> else if(element.attachEvent)
{
this.observers.push([element,name,observer,useCapture]);
element.attachEvent('on' name,observer); > };
},

unloadCache:function ()
{
if(!Event.observers)
for(var i=0;i< Event.observers.length;i )
{
Event.stopObserving.apply(this,Event.observers[i]);
Event.observers[i][0]=null; ;
イベント.observers=false
 },

observe:function (element,name,observer,useCapture)
{
var element=G(element);
useCapture=useCapture||false;
if(name=='keypress'&&(navigator.appVersion.match(/Konqueror|Safari|KHTML/)||element.attachEvent))
name='keydown';
this._observeAndCache(要素,名前,オブザーバー,useCapture);
},

stopObserving:function (element,name,observer,useCapture)
{
var element=G(element);
useCapture=useCapture||false;
if(name=='keypress'&&(navigator.appVersion.match(/Konqueror|Safari|KHTML/)||element.detachEvent))
name='keydown';
if(element.removeEventListener)
{
element.removeEventListener(name,observer,useCapture);
}
else if(element.detachEvent)
{
element.detachEvent('on' name,observer);
};
}
}
);

Event.observe(window,'unload',Event.unloadCache,false);



var Class=function ()
{
var _class=function ()
{
this.initialize.apply(this,arguments);
};
for(i=0;i {
superClass=arguments[i];
for(superClass.prototype のメンバー)
{
_class.prototype[メンバー]=superClass.prototype[メンバー];
};
};
_class.child=function ()
{
return new Class(this);
};
_class.extend=function (f)
{
for(property in f)
{
_class.prototype[プロパティ]=f[プロパティ];
};
};
return _class;
};


//百度空間の最端と最小端の p の id 値を変更します
//場合はフラグが開始され、場合は出力状態の ID 値
//場合はフラグが終了，これは非弹出状態态的id値，すなわち本来のid值
function space(flag)
{
if(flag=="begin")
{
var ele=document .getElementById("ft");
if(typeof(ele)!="#ff0000"&&ele!=null)
ele.id="ft_popup";
ele=document.getElementById("usrbar");
if(typeof(ele)!="未定義"&&ele!=null)
ele.id="usrbar_popup";
}
else if(flag=="end")
{
var ele=document.getElementById("ft_popup");
if(typeof(ele)!="未定義"&&ele!=null)
ele.id="ft";
ele=document.getElementById("usrbar_popup");
if(typeof(ele)!="未定義"&&ele!=null)
ele.id="usrbar";
};
};



//*********************************** **************Popup类弹出窗口******************************* ********************************


var Popup=new Class();

Popup.prototype={
//弹出窗口中架台の名前名
iframeIdName:'ifr_popup',

initialize:function (config)
{
//---------------弹话框の配置情報----
//contentType:設定情報コンテンツ領域は何の種類です：1 は別の html ファイルです | 2 は自定义html文字列| 3 は確認します| 4 はアラート警告对话框
//isHaveTitle: 否か表示标题栏
//scrollType: 設置または获取对话框中のフレームが操作可能かどうか
//isBackgroundCanClick: 後、否か允许つまり、false の場合は全スクリーン マスクがあり、true の場合は全スクリーン マスクが削除されます
//isSupportDraging: サポートされているかどうか
// isShowShadow：否か现实阴影
//isReloadOnClose：否か刷新页面，并关闭对话框
//幅：宽度
//高さ：高
this.config=Object.extend({contentType: 1,isHaveTitle:true,scrollType:'yes',isBackgroundCanClick:false,isSupportDraging:true,isShowShadow:true,isReloadOnClose:true,width:400,height:300},config||{});

//----------------对话框のパラメータ值情報--------- ----
//shadowWidth ：阴影の宽度
//contentUrl ：html链接页面
//contentHtml ：htmlコンテンツ
//callBack ：回调的関数名
//パラメータ：回调的関数名中传的パラメータ
//confirmCon：对话框内容
//alertCon：警告内容
//someHiddenTag：页面内に必要な隐藏の要素列表、逗号分割
//someHiddenEle: 非表示にする必要がある要素の ID リスト (someToHidden との違いは、someHiddenEle は getElementById を使用するのに対し、someToHidden はオブジェクトを含む getElementByTagName を使用することです)
//overlay:
//coverOpacity: 布の透明度をカバーしますvalue
this.info={shadowWidth:4,title:"",contentUrl:"",contentHtml:"",callBack:null,parameter:null,confirmCon:"",alertCon:"",someHiddenTag :"select ,object,embed",someHiddenEle:"",overlay:0,coverOpacity:40};

//色を設定します cColor: マスクの背景、bColor: コンテンツ領域の背景、tColor: title 列と境界線の色、wColor: フォントの背景色
this.color={cColor:"#EEEEEE",bColor:"#FFFFFF",tColor:"#709CD2",wColor:"# FFFFFF"};

this.dropClass=null;

//隠しオブジェクト リストを配置するために使用され、hiddenTag メソッドの最初の呼び出し
this.someToHidden=[];

//タイトル バーがない場合、ドラッグはサポートされません
if(!this.config.isHaveTitle)
{
this.config.isSupportDraging=false;
}
//初期化
this.iniBuild();
},

//設定情報とパラメータの内容を設定
setContent:function (arrt,val)
{
if(val! ='')
{
switch(arrt)
{
case 'width':this.config.width=val;
case ' height':this.config.height=val;
case 'title':this.info.title=val;
case 'contentUrl':this.info.contentUrl =val;
ブレーク;
ケース 'contentHtml':this.info.contentHtml=val;
ケース 'callBack':this.info.callBack=val;
case 'parameter':this.info.parameter=val;
case 'confirmCon':this.info.confirmCon=val;
case 'alertCon': this.info.alertCon =val;
case 'someHiddenTag':this.info.someHiddenTag=val;
case 'someHiddenEle':this.info.someHiddenEle=val;
ブレーク;
case 'overlay':this.info.overlay=val;
};

iniBuild:function () {
G ('dialogCase')?G('dialogCase').parentNode.removeChild(G('dialogCase')):function (){};
var op=document.createElement('span'); ;
op .id='dialogCase';
document.body.appendChild(op)
},

build:function ()
{
//フルスクリーンマスクのz -index
varbaseZIndex=10001 this.info.overlay*10
//マスク上のポップアップウィンドウのzインデックスを設定します(2つの値より大きい)マスクの Z インデックス)
var showZIndex=baseZIndex 2;

//フレーム名を定義します
this.iframeIdName='ifr_popup' this.info.overlay; > //画像のメインパスを設定します
var path ="http://img.baidu.com/hi/img/";

//閉じるボタン
var close='
//フィルター設定を使用します オブジェクトの透明度
var cB='filter: alpha(opacity=' this.info.coverOpacity ');opacity:' this.info.coverOpacity/100 ';';

//全画面カバーを設定します
var cover='

';

/ /ポップアップメインウィンドウの設定を設定します
var mainBox='

';

// ウィンドウのタイトル バーを設定します
if(this.config.isHaveTitle)
{
 mainBox ='';
}
else
{
mainBox ='';
};

//設置窗口メインコンテンツ領域
mainBox ='

' '' '

' this.info.title '

' close '

'閉じる '

」 '

';

//如果有蒙布
if(!this.config.isBackgroundCanClick)
{
G('dialogCase').innerHTML=cover mainBox;
G('dialogBoxBG').style.height=document.body.scrollHeight;
}
else
{
G('dialogCase').innerHTML=mainBox;
}

Event.observe(G('dialogBoxClose'),"click",this.reset.bindAsEventListener(this),false);

//如果サポート拖アニメーション,则設置拖動処理
if(this.config.isSupportDraging)
{
dropClass=new Dragdrop(this.config.width,this.config .height,this.info.shadowWidth,this.config.isSupportDraging,this.config.contentType);
G("dialogBoxTitle").style.cursor="move";
};

this.lastBuild();
},


lastBuild:function ()
{
//設定confim对话框の具体的な内容
var confirm='

' this.info.confirmCon '

 

';
//設置alert对话框の具体的な内容
var alert='

' this.info.alertCon '

';

var baseZIndex=10001 this.info.overlay*10;
var coverIfZIndex=baseZIndex 4;

//コンテンツ判断タイプ決定窗口のメインコンテンツ領域应该表示内容
if(this.config.contentType==1)
{
var openIframe="";
var coverIframe="

";
G("dialogBody").innerHTML=openIframe coverIframe;
}
else if(this.config.contentType==2)
{
G("dialogBody").innerHTML=this.info.contentHtml;
}
else if(this.config.contentType= =3)
{
G("dialogBody").innerHTML=confirm;Event.observe(G('dialogOk'),"click",this.forCallback.bindAsEventListener(this),false); >Event.observe(G('dialogCancel'),"click",this.close.bindAsEventListener(this),false);
}
else if(this.config.contentType==4)
{
G("dialogBody").innerHTML=alert;
Event.observe(G('dialogYES'),"click",this.close.bindAsEventListener(this),
};
},

//ポップアップウィンドウの高さと内容を再読み込みします
reBuild:function ()
{
G('dialogBody').height=G( 'dialogBody' ).clientHeight;
this.lastBuild()
},

show:function ()
{
// info
で指定された一部の要素を非表示にしますthis .hiddenSome();
//ポップアップウィンドウを中央に配置します
this.middle();
//シャドウを設定します
if(this.config.isShowShadow)
this. shadow();
},

//コールバック関数を設定します
forCallback:function ()
{
return this.info.callBack(this.info.parameter);
},

//ポップアップウィンドウの影を設定します
shadow:function ()
{
var oShadow=G('dialogBoxShadow'); var oDialog=G('dialogBox'); oShadow['style']['position']="absolute";
oShadow['style']['background']="#000"; ['style']['display'] ="";
oShadow['style']['opacity']="0.2";
oShadow['style']['filter']="alpha (opacity=20)";
oShadow['style']['top']=oDialog.offsetTop this.info.shadowWidth;
oShadow['style']['left']=oDialog.offsetLeft this .info.shadowWidth;
oShadow['style']['width']=oDialog.offsetWidth;oShadow['style']['height']=oDialog.offsetHeight; > // ポップアップウィンドウを中央に配置します
middle:function ()
{
if(!this.config.isBackgroundCanClick)
G('dialogBoxBG').style.display='';
var oDialog=G('dialogBox' );
oDialog['style']['position']="absolute";
oDialog['style']['display']='';
var sClientWidth=document.body.clientWidth ;
var sClientHeight=document.body.clientHeight;
var sScrollTop=document.body.scrollTop; //alert("document.body.clientWidth = " sClientWidth "ndocument.body.clientHeight" sClientHeight) ;
var sleft=(document.body.clientWidth/2)-(oDialog.offsetWidth/2);
var iTop=-80 (sClientHeight/2 sScrollTop) -(oDialog.offsetHeight/2);
var sTop=iTop>0?iTop:(sClientHeight/2 sScrollTop)-(oDialog.offsetHeight/2); //alert("var iTop=-80 ( sClientHeight/2 sScrollTop)-(oDialog.offsetHeight/ 2);n" "sClientHeight は " sClientHeight "nsScrollTop は " sScrollTop);
//alert("iTop は " iTop);
if(sTop<1 )
sTop="20";
if(sleft<1)
sleft="20";
oDialog['style']['left']=sleft; 'style']['top']=sTop ;
//alert("sleft は " sleft); //alert("sTop は " sTop); > // ページを更新し、現在のポップアップ ウィンドウを閉じます
replace:function ()
{
if(this.config.isReloadOnClose)
{
top.location.reload( );
};
this.close( );

// 現在のポップアップ ウィンドウを閉じる
close:function ()
> G('dialogBox').style.display='none';
if(!this.config.isBackgroundCanClick)
G('dialogBoxBG').style.display='none'; (this.config.isShowShadow)
G('dialogBoxShadow').style.display='none';
G('dialogBody').innerHTML=''; );
},

//someHiddenTag と someHiddenEle
内のすべての要素を非表示にする hiddenSome:function ()
{
//someHiddenTag 内のすべての要素を非表示にする
var tag=this.info.someHiddenTag.split(",");
if(tag.length==1&&tag[0]=="")
{
tag.length=0;
}
for(var i=0;i {
this.hiddenTag(tag[i]); };
//someHiddenEle 内のすべてのカンマ区切り ID 要素を非表示にする
var ids=this.info.someHiddenEle.split(",");
if(ids.length==1&&ids[ 0]= ="")
ids.length=0;
for(var i=0;i {
this.hiddenEle(ids[i]) ; > };
// 上部と下部の p の ID 値をポップアップ状態の ID 値に変更します。space
space("begin") },

//要素のグループを非表示にする
hiddenTag:function (tagName)
{
var ele=document.getElementsByTagName(tagName)
if(ele!=null) <🎜; > {
for(var i=0;i {
if(ele[i].style.display!="none"&&ele[i].style.visibility !=' 非表示')
{
ele[i].style.visibility='hidden';
this.someToHidden.push(ele[i]) }; ;
};
},

// 単一の要素を非表示にする
hiddenEle:function (id)
var ele=document.getElementById(id); 🎜> if( typeof(ele)!="unknown"&&ele!=null)
{
ele.style.visibility='hidden';
this.someToHidden.push(ele); }
},

//someToHidden に保存されているすべての非表示要素を表示します
//そして、上部と下部の p を元の ID 値に戻します
showSome:function ()
{
for(var i=0;i {
this.someToHidden[i].style.visibility='visible';
space( "終了");




//*************** ******* *************************************Dragdrop クラス (ドラッグ アクション) ****** ******************************************* ******* ****

var Dragdrop=new Class();

Dragdrop.prototype={
初期化:function (width,height,shadowWidth,showShadow) ,contentType)
{
this.dragData=null;
this.width=width;高さ;
this.shadowWidth=showShadow;
this.IsDraging=false; );
イベント。observ(G('dialogBoxTitle'),"mousedown",this.moveStart.bindAsEventListener(this),false); 🎜> {
this .IsDraging=true;
if(this.contentType==1)
{
G("iframeBG").style.display=""; "iframeBG").style.width=this.width;
G("iframeBG").style.height=this.height;
Event.observe(document,"mousemove",this) .mousemove.bindAsEventListener(this) ,false);
Event.observe(document,"mouseup",this.mouseup.bindAsEventListener(this),false);
Event.observe(document,"selectstart",this) .returnFalse,false);
this.dragData={x:Event.pointerX(event),y:Event.pointerY(event)};
this.backData={x:parseInt(this.oObj.style) .left),y:parseInt (this.oObj.style.top)};
},

Mousemove:function (イベント)
{
if(!this.IsDraging)
戻り値 ;
var iLeft=Event.pointerX(event)-this.dragData["x"] parseInt(this.oObj.style.left);
var iTop=Event.pointerY(event)-this .dragData["y"] parseInt(this.oObj.style.top);
if(this.dragData["y"] iTop=iTop -12;
else if(this.dragData["y"]>parseInt(this.oObj.style.top) 25)
iTop=iTop 12;
this.oObj.style.left= iLeft;
これ。 oObj.style.top=iTop;
if(this.showShadow)
G('dialogBoxShadow').style.left=iLeft this.shadowWidth; G('dialogBoxShadow').style.top=iTop this.shadowWidth;
this.dragData={x:Event.pointerX(event),y:Event.pointerY(event)}; > document.body.style.cursor="move";
},

マウスアップ:関数 (イベント)
{
if(!this.IsDraging)
return
if(this.contentType ==1)
G("iframeBG").style.display="none";
document.onmousemove=null;document.onmouseup=null;
var mousX=Event.pointerX(event)-(document.documentElement.scrollLeft||document.body.scrollLeft);
var mousY=Event.pointerY(event)-(document. documentElement.scrollTop||document.body.scrollTop);
if(mousX<1||mousY<1||mousX>document.body.clientWidth||mousY>document.body.clientHeight)
{
this.oObj.style.left=this.backData["x"];
this.oObj.style.top=this.backData["y"]
if(this.showShadow)
{
G('dialogBoxShadow').style.left=this.backData.x this.shadowWidth;
G('dialogBoxShadow').style.top=this.backData.y this.shadowWidth;
};
this.IsDraging=false;
document.body.style.cursor="";
Event.stopObserving(document,"selectstart",this.returnFalse,false);
},

returnFalse:function ()
{
return false;
}
};

Popup.js ファイルに対して上記の操作を実行します。参考として、この js ファイルをテストする html ページのコードを以下に示します。戻って簡単にテストできます。

iframe frame example


html character String example


confirm dialog example

alert warning box example

There are piles of codes! The one who dragged him didn't know what was going on? I don’t know exactly how the class function above is done. Where there are no comments, it is basically not very clear. I'll find time to analyze it further! Find time to write other notes as well. If you understand it, please give me more advice, the more detailed the better.