JS動畫效果代碼2

2019-11-21 01:47:26

字體：大中小

來源：轉載

供稿：網友

<!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   class="iwvjtn8m0"   id="apDiv1"></div>     <div   class="iwvjtn8m0"   id="apDiv2"></div> <div   class="iwvjtn8m0"   id="apDiv3"></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 = {};    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 >= pObj.targetSize.w && h >= 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 < pObj.targetSize.w)      w += pObj.step.x;    if(h <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";  } } var ani = new JAni();  ani.popup(     "apDiv1",     {w:50,h:50}, //初始長寬     {w:200,h:500}, //目標長寬     {x:8,y:8},  //步長     {s:10,e:80,t:10}//透明度 起始，結束，步長     );       ani.popup(     "apDiv2",     {w:30,h:50}, //初始長寬     {w:400,h:400}, //目標長寬     {x:8,y:8},  //步長     {s:10,e:80,t:2}//透明度 起始，結束，步長     );       ani.popup(     "apDiv3",     {w:10,h:10}, //初始長寬     {w:200,h:500}, //目標長寬     {x:8,y:8},  //步長     {s:10,e:80,t:10}//透明度 起始，結束，步長     );         </script>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：JS動畫效果代碼3

下一篇：CSS常用網站布局實例