Home > Web Front-end > JS Tutorial > body text

JS animation effect code 3_javascript skills

WBOY
Release: 2016-05-16 19:05:32
Original
916 people have browsed it

Take your time, this time you can expand in any direction!

Copy code The code is as follows:

 
 
 
 
Untitled Document 
 
 

 
    
 
    
 
 
 
 
 
 
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}//透明度 起始,结束,步长 
    );   
 
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template