百度空间的popup效果分析第1/3页

143 阅读 0 评论 95 点赞

我是靠谱客的博主搞怪棉花糖，最近开发中收集的这篇文章主要介绍百度空间的popup效果分析第1/3页，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

百度空间的弹出窗口和拖拽效果，看起来挺不错的。现在很多知名网站都是用的这样的技术。下面把我down的js代码发出来，我分析了一部分，但是还有很多东西不明白怎么回事，没有写注释的部分，还请高手能帮我解释一下。本人属于初学，有不对的地方还请多多指教。
在声明一条吧，此代码仅做学习用，技术版权属于百度。
主要是一个叫做：popup.js的文件，如下：
/**//*********************************************** popup.js**************************************************/
//为数组Array添加一个push方法
//为数组的末尾加入一个对象
if(!Array.prototype.push)
{
Array.prototype.push=function ()
{
var startLength=this.length;
for(var i=0;i<arguments.length;i++)
{
this[startLength+i]=arguments[i];
}
return this.length;
}
};

//对G函数的参数进行处理
function G()
{
//定义一个数组用来保存参数
var elements=new Array();
//循环分析G中参数的内容
for(var i=0;i<arguments.length;i++)
{
var element=arguments[i];

//如果参数的类型为string，则获得以这个参数为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 (object)
{
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(property in source)
{
destination[property]=source[property];
};
return destination;
};

if(!window.Event)
{
var Event=new Object();
};

Object.extend(
Event,

{
observers:false,
element:function (event)
{
return event.target||event.srcElement;
},

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

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

pointerY:function (event)
{
return event.pageY||(event.clientY+(document.documentElement.scrollTop||document.body.scrollTop));
},

stop:function (event)
{
if(event.preventDefault)
{
event.preventDefault();
event.stopPropagation();
}
else
{
event.returnValue=false;
event.cancelBubble=true;
};
},

findElement:function (event,tagName)
{
var element=Event.element(event);
while(element.parentNode&&(!element.tagName||(element.tagName.toUpperCase()!=tagName.toUpperCase())))
element=element.parentNode;
return element;
},

_observeAndCache:function (element,name,observer,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)
return;
for(var i=0;i<Event.observers.length;i++)
{
Event.stopObserving.apply(this,Event.observers[i]);
Event.observers[i][0]=null;
};
Event.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(element,name,observer,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);
};
}
}
);