JS animation effect code 3_javascript skills

Take your time, this time you can expand in any direction!

Copy code The code is as follows:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 
 
 
 
 

 
    

 
    

 

 

 
 
 
<script>  <BR>function $(pId){  <BR> return document.getElementById(pId);  <BR>}  <br><br>function JPos(){  <br><br>}  <br><br>JPos.getAbsPos = function(pTarget){  <BR> var _x = 0;  <BR> var _y = 0;  <BR> while(pTarget.offsetParent){  <BR>   _x  = pTarget.offsetLeft;  <BR>   _y  = pTarget.offsetTop;  <BR>   pTarget = pTarget.offsetParent;  <BR> }  <BR> _x  = pTarget.offsetLeft;  <BR> _y  = pTarget.offsetTop;  <br><br> return {x:_x,y:_y};  <BR>}  <br><br>function JAniObj(){  <BR> this.obj = null;  <BR> this.interval = null;  <br><br> this.orgPos = null;  <BR> this.targetPos = null;  <br><br> this.orgSize = {w:50,y:50};  //初始长宽  <BR> this.targetSize = {w:100,y:100}; //目标长宽  <BR> this.step  = {x:10,y:10};  //步长 x:x方向　y:y方向  <BR> this.alpha  = {s:10,e:90,t:10};  //透明度，s初始，e结束,t步长  <BR>}  <br><br>function JAni(){  <BR> var self = this;  <BR> var aniObjs = {};  <br><br> var getCurrentStyleProperty = function(pObj,pProperty){  <BR>  try{   <BR>   if(pObj.currentStyle)  <BR>    return eval("pObj.currentStyle."   pProperty);  <BR>   else  <BR>    return document.defaultView.getComputedStyle(pObj,"").getPropertyValue(pProperty);  <BR>  }catch(e){  <BR>   alert(e);  <BR>  }  <BR> }  <br><br> this.popup = function(pDiv,pOrgSize,pTargetSize,pStep,pAlpha){  <br><br>  var aniObj = new JAniObj();  <BR>  aniObjs[pDiv] = aniObj;  <br><br>  with(aniObj){  <BR>   obj   = $(pDiv);  <BR>   orgPos  = JPos.getAbsPos(obj);  <BR>   orgSize  = pOrgSize;  <BR>   targetSize = pTargetSize;  <BR>   step  = pStep;  <BR>   alpha  = pAlpha;  <br><br>   with(obj.style){  <BR>    overflow = "hidden";  <BR>    position = "absolute";  <BR>    width = pOrgSize.w   "px";  <BR>    height = pOrgSize.h   "px";  <BR>    left = orgPos.x   "px";  <BR>    top = orgPos.y   "px";   <BR>    if(document.all){  <BR>     filter = "Alpha(opacity="   pAlpha.s   ")";  <BR>    }else  <BR>     opacity = pAlpha.s / 100;  <BR>   }     <BR>  }  <br><br>  aniObj.interval = setInterval("popup_('"   pDiv   "')",10);  <BR> }  <br><br> popup_ = function(pDivId){  <br><br>    <BR>  pObj = aniObjs[pDivId];  <br><br>  var w = parseInt(pObj.obj.style.width);  <BR>  var h = parseInt(pObj.obj.style.height);  <br><br>  if(w >= Math.abs(pObj.targetSize.w) && h >= Math.abs(pObj.targetSize.h)){  <BR>   clearInterval(pObj.interval);  <BR>   if(document.all)  <BR>    pObj.obj.style.filter = "Alpha(opacity="   pObj.alpha.e   ")";  <BR>   else  <BR>    pObj.obj.style.opacity = pObj.alpha.e / 100;  <br><br>     <br><br>   delete aniObjs[pObj.obj.id];  <BR>  }else{  <BR>   if(w < Math.abs(pObj.targetSize.w))  <BR>    w  = pObj.step.x;  <br><br>   if(h < Math.abs(pObj.targetSize.h))  <BR>    h  = pObj.step.y;  <br><br>   if(document.all){  <BR>    var pattern = /opacity=(d{1,3})/;  <BR>    var result = pattern.exec(pObj.obj.style.filter);  <BR>    if(result != null){  <BR>     if(result[1] < pObj.alpha.e)  <BR>      pObj.obj.style.filter = "Alpha(opacity="   (result[1]   pObj.alpha.t)   ")"  <BR>     else  <BR>      pObj.obj.style.filter = "Alpha(opacity="   pObj.alpha.e   ")";  <BR>    }  <BR>   }else{  <BR>    if(pObj.obj.style.opacity < pObj.alpha.e / 100){  <BR>     pObj.obj.style.opacity = parseFloat(pObj.obj.style.opacity)   pObj.alpha.t / 100;  <BR>    }else  <BR>     pObj.obj.style.opacity = pObj.alpha.e / 100;  <BR>   }  <BR>  }  <br><br>  pObj.obj.style.width = w   "px";  <BR>  pObj.obj.style.height = h   "px";  <br><br>  if(pObj.targetSize.w < 0){  <BR>   var vLeft = parseInt(getCurrentStyleProperty(pObj.obj,"left"));  <BR>   vLeft = isNaN(vLeft) ? 0 : vLeft;  <BR>   pObj.obj.style.left = vLeft - pObj.step.x   "px";  <BR>  }  <br><br>  if(pObj.targetSize.h < 0){  <BR>   var vTop = parseInt(getCurrentStyleProperty(pObj.obj,"top"));  <BR>   vTop = isNaN(vTop) ? 0 : vTop;  <BR>   pObj.obj.style.top = vTop - pObj.step.y   "px";  <BR>  }    <BR> }  <BR>}  <br><br>var ani = new JAni();  <BR> ani.popup(  <BR>    "apDiv1",  <BR>    {w:50,h:50}, //初始长宽  <BR>    {w:200,h:200}, //目标长宽  <BR>    {x:8,y:8},  //步长  <BR>    {s:10,e:80,t:10}//透明度 起始，结束，步长  <BR>    );  <br><br> ani.popup(  <BR>    "apDiv2",  <BR>    {w:50,h:50}, //初始长宽  <BR>    {w:-200,h:200}, //目标长宽  <BR>    {x:8,y:8},  //步长  <BR>    {s:10,e:40,t:2}//透明度 起始，结束，步长  <BR>    );  <br><br> ani.popup(  <BR>    "apDiv3",  <BR>    {w:50,h:50}, //初始长宽  <BR>    {w:-200,h:-200},//目标长宽  <BR>    {x:8,y:8},  //步长  <BR>    {s:10,e:40,t:10}//透明度 起始，结束，步长  <BR>    );  <br><br> ani.popup(  <BR>    "apDiv4",  <BR>    {w:50,h:50}, //初始长宽  <BR>    {w:200,h:-200},//目标长宽  <BR>    {x:8,y:8},  //步长  <BR>    {s:10,e:50,t:10}//透明度 起始，结束，步长  <BR>    );    <BR></script>