JS 애니메이션 효과 코드 3_javascript 기술-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 19:05:32

원래의

952명이 탐색했습니다.

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

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

Untitled Document

함수 $(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}//透明德起始，结束，步长
);