慢慢来，这次实现了向任意方向扩展！
复制代码 代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>UntitledDocument</title>
<styletype="text/css">
<>
</style>
</head>
<body>
<divid="apDiv1"></div>
<divid="apDiv2"></div>
<divid="apDiv3"></div>
<divid="apDiv4"></div>
</body>
</html>
<scriptlanguage="javascript"type="text/javascript">
function$(pId){
returndocument.getElementById(pId);
}
functionJPos(){
}
JPos.getAbsPos=function(pTarget){
var_x=0;
var_y=0;
while(pTarget.offsetParent){
_x+=pTarget.offsetLeft;
_y+=pTarget.offsetTop;
pTarget=pTarget.offsetParent;
}
_x+=pTarget.offsetLeft;
_y+=pTarget.offsetTop;
return{x:_x,y:_y};
}
functionJAniObj(){
this.obj=null;
this.interval=null;
this.orgPos=null;
this.targetPos=null;
this.orgSize={w:50,y:50};//初始长宽
this.targetSize={w:100,y:100};//目标长宽
this.step={x:10,y:10};//步长x:x方向y:y方向
this.alpha={s:10,e:90,t:10};//透明度，s初始，e结束,t步长
}
functionJAni(){
varself=this;
varaniObjs={};
vargetCurrentStyleProperty=function(pObj,pProperty){
try{
if(pObj.currentStyle)
returneval("pObj.currentStyle."+pProperty);
else
returndocument.defaultView.getComputedStyle(pObj,"").getPropertyValue(pProperty);
}catch(e){
alert(e);
}
}
this.popup=function(pDiv,pOrgSize,pTargetSize,pStep,pAlpha){
varaniObj=newJAniObj();
aniObjs[pDiv]=aniObj;
with(aniObj){
obj=$(pDiv);
orgPos=JPos.getAbsPos(obj);
orgSize=pOrgSize;
targetSize=pTargetSize;
step=pStep;
alpha=pAlpha;
with(obj.style){
overflow="hidden";
position="absolute";
width=pOrgSize.w+"px";
height=pOrgSize.h+"px";
left=orgPos.x+"px";
top=orgPos.y+"px";
if(document.all){
filter="Alpha(opacity="+pAlpha.s+")";
}else
opacity=pAlpha.s/100;
}
}
aniObj.interval=setInterval("popup_('"+pDiv+"')",10);
}
popup_=function(pDivId){
pObj=aniObjs[pDivId];
varw=parseInt(pObj.obj.style.width);
varh=parseInt(pObj.obj.style.height);
if(w>=Math.abs(pObj.targetSize.w)&&h>=Math.abs(pObj.targetSize.h)){
clearInterval(pObj.interval);
if(document.all)
pObj.obj.style.filter="Alpha(opacity="+pObj.alpha.e+")";
else
pObj.obj.style.opacity=pObj.alpha.e/100;
deleteaniObjs[pObj.obj.id];
}else{
if(w<Math.abs(pObj.targetSize.w))
w+=pObj.step.x;
if(h<Math.abs(pObj.targetSize.h))
h+=pObj.step.y;
if(document.all){
varpattern=/opacity=(d{1,3})/;
varresult=pattern.exec(pObj.obj.style.filter);
if(result!=null){
if(result[1]<pObj.alpha.e)
pObj.obj.style.filter="Alpha(opacity="+(result[1]+pObj.alpha.t)+")"
else
pObj.obj.style.filter="Alpha(opacity="+pObj.alpha.e+")";
}
}else{
if(pObj.obj.style.opacity<pObj.alpha.e/100){
pObj.obj.style.opacity=parseFloat(pObj.obj.style.opacity)+pObj.alpha.t/100;
}else
pObj.obj.style.opacity=pObj.alpha.e/100;
}
}
pObj.obj.style.width=w+"px";
pObj.obj.style.height=h+"px";
if(pObj.targetSize.w<0){
varvLeft=parseInt(getCurrentStyleProperty(pObj.obj,"left"));
vLeft=isNaN(vLeft)?0:vLeft;
pObj.obj.style.left=vLeft-pObj.step.x+"px";
}
if(pObj.targetSize.h<0){
varvTop=parseInt(getCurrentStyleProperty(pObj.obj,"top"));
vTop=isNaN(vTop)?0:vTop;
pObj.obj.style.top=vTop-pObj.step.y+"px";
}
}
}
varani=newJAni();
ani.popup(
"apDiv1",
{w:50,h:50},//初始长宽
{w:200,h:200},//目标长宽
{x:8,y:8},//步长
{s:10,e:80,t:10}//透明度起始，结束，步长
);
ani.popup(
"apDiv2",
{w:50,h:50},//初始长宽
{w:-200,h:200},//目标长宽
{x:8,y:8},//步长
{s:10,e:40,t:2}//透明度起始，结束，步长
);
ani.popup(
"apDiv3",
{w:50,h:50},//初始长宽
{w:-200,h:-200},//目标长宽
{x:8,y:8},//步长
{s:10,e:40,t:10}//透明度起始，结束，步长
);
ani.popup(
"apDiv4",
{w:50,h:50},//初始长宽
{w:200,h:-200},//目标长宽
{x:8,y:8},//步长
{s:10,e:50,t:10}//透明度起始，结束，步长
);
</script>