JS动画效果代码3

时间:2021-05-26

慢慢来,这次实现了向任意方向扩展!
复制代码 代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://putedStyle(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>

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章