Heim >Web-Frontend >js-Tutorial >JS动画效果代码2_javascript技巧

JS动画效果代码2_javascript技巧

WBOYOriginal: 2016-05-16 19:05:34923Durchsuche

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title> 
<style type="text/css"> 
 
</style>

<div id="apDiv1"></div> 
    <div id="apDiv2"></div> 
<div id="apDiv3"></div> 
 
 
<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需刷新才能执行]

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js批量上传界面的实现_表单特效Nächster Artikel：CSS常用网站布局实例_javascript技巧

In Verbindung stehende Artikel

Mehr sehen