JS 애니메이션 효과 코드 3_javascript 기술

천천히 시간을 가지세요. 이번에는 어떤 방향으로든 확장할 수 있습니다!

코드 복사 코드는 다음과 같습니다.

 
 
 
 
 
 
 

 
    

 
    

 

 

 
 
 
 
함수 $(pId){ 
return document.getElementById(pId); 
} 

함수 JPos(){ 

} 

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; 

 반환 {x:_x,y:_y}; 
} 

함수 JAniObj(){ 
 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步长 
} 

function JAni(){ 
 var self = this; 
 var aniObjs = {}; 

 var getCurrentStyleProperty = function(pObj,pProperty){ 
  try{  
   if(pObj.currentStyle) 
    return eval("pObj.currentStyle."   pProperty); 
   else 
    return document.defaultView.getCompulatedStyle(pObj,"").getPropertyValue(pProperty); 
  }catch(e){ 
   alert(e); 
  } 
 } 

 this.popup = function(pDiv,pOrgSize,pTargetSize,pStep,pAlpha){ 

  var aniObj = new JAniObj(); 
  aniObjs[pDiv] = aniObj; 

  with(aniObj){ 
   obj   = $(pDiv); 
   orgPos  = JPos.getAbsPos(obj); 
   orgSize  = pOrgSize; 
   targetSize = pTargetSize; 
   단계  = pStep; 
   알파  = pAlpha; 

   with(obj.style){ 
    오버플로 = "숨김"; 
    위치 = "절대"; 
    너비 = pOrgSize.w   "px"; 
    높이 = pOrgSize.h   "px"; 
    왼쪽 = orgPos.x   "px"; 
    top = orgPos.y   "px";  
    if(document.all){ 
     필터 = "Alpha(opacity="   pAlpha.s   ")"; 
    }else 
     불투명도 = pAlpha.s / 100; 
   }    
  } 

  aniObj.interval = setInterval("popup_('"   pDiv   "')",10); 
 } 

 popup_ = function(pDivId){ 

   
  pObj = aniObjs[pDivId]; 

  var w = parseInt(pObj.obj.style.width); 
  var h = 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; 

    

   aniObjs[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){ 
    var pattern = /opacity=(d{1,3})/; 
    var result = pattern.exec(pObj.obj.style.filter); 
    if(결과 != null){ 
     if(결과[1] < pObj.alpha.e) 
      pObj.obj.style.filter = "Alpha(opacity="   (결과[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){ 
   var vLeft = parseInt(getCurrentStyleProperty(pObj.obj,"left")); 
   vLeft = isNaN(vLeft) ? 0: v왼쪽; 
   pObj.obj.style.left = vLeft - pObj.step.x   "px"; 
  } 

  if(pObj.targetSize.h < 0){ 
   var vTop = parseInt(getCurrentStyleProperty(pObj.obj,"top")); 
   vTop = isNaN(vTop) ? 0: vTop; 
   pObj.obj.style.top = vTop - pObj.step.y   "px"; 
  }   
 } 
} 

var ani = new JAni(); 
 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}//透明德 起始，结束，步长 
);