JS动画效果代码3

时间:2020-05-12 人气:0

慢慢来，这次实现了向任意方向扩展！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
    <div id="apDiv1"></div>
    <div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
</body>
</html>
<script language="javascript" type="text/javascript">
function $(pId){
return document.getElementById(pId);
}

function 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;

return {x:_x,y:_y};
}

function 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.getComputedStyle(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;
   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];

  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;



   delete 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(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){
   var vLeft = parseInt(getCurrentStyleProperty(pObj.obj,"left"));
   vLeft = isNaN(vLeft) ? 0 : vLeft;
   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}//透明度起始，结束，步长
    );
</script>

加载全部内容