JS动画效果代码3

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(ww+=pObj.step.x;

if(hh+=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.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.opacitypObj.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}//透明度起始，结束，步长
);