JS动画效果代码3_javascript技巧

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

复制代码 代码如下:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 
 
 
 
 

 
    

 
    

 

 

 
 
 
<script> <BR>function $(pId){ <BR> return document.getElementById(pId); <BR>} <br><br>function JPos(){ <br><br>} <br><br>JPos.getAbsPos = function(pTarget){ <BR> var _x = 0; <BR> var _y = 0; <BR> while(pTarget.offsetParent){ <BR> _x += pTarget.offsetLeft; <BR> _y += pTarget.offsetTop; <BR> pTarget = pTarget.offsetParent; <BR> } <BR> _x += pTarget.offsetLeft; <BR> _y += pTarget.offsetTop; <br><br> return {x:_x,y:_y}; <BR>} <br><br>function JAniObj(){ <BR> this.obj = null; <BR> this.interval = null; <br><br> this.orgPos = null; <BR> this.targetPos = null; <br><br> this.orgSize = {w:50,y:50}; //初始长宽 <BR> this.targetSize = {w:100,y:100}; //目标长宽 <BR> this.step = {x:10,y:10}; //步长 x:x方向　y:y方向 <BR> this.alpha = {s:10,e:90,t:10}; //透明度，s初始，e结束,t步长 <BR>} <br><br>function JAni(){ <BR> var self = this; <BR> var aniObjs = {}; <br><br> var getCurrentStyleProperty = function(pObj,pProperty){ <BR> try{ <BR> if(pObj.currentStyle) <BR> return eval("pObj.currentStyle." + pProperty); <BR> else <BR> return document.defaultView.getComputedStyle(pObj,"").getPropertyValue(pProperty); <BR> }catch(e){ <BR> alert(e); <BR> } <BR> } <br><br> this.popup = function(pDiv,pOrgSize,pTargetSize,pStep,pAlpha){ <br><br> var aniObj = new JAniObj(); <BR> aniObjs[pDiv] = aniObj; <br><br> with(aniObj){ <BR> obj = $(pDiv); <BR> orgPos = JPos.getAbsPos(obj); <BR> orgSize = pOrgSize; <BR> targetSize = pTargetSize; <BR> step = pStep; <BR> alpha = pAlpha; <br><br> with(obj.style){ <BR> overflow = "hidden"; <BR> position = "absolute"; <BR> width = pOrgSize.w + "px"; <BR> height = pOrgSize.h + "px"; <BR> left = orgPos.x + "px"; <BR> top = orgPos.y + "px"; <BR> if(document.all){ <BR> filter = "Alpha(opacity=" + pAlpha.s + ")"; <BR> }else <BR> opacity = pAlpha.s / 100; <BR> } <BR> } <br><br> aniObj.interval = setInterval("popup_('" + pDiv + "')",10); <BR> } <br><br> popup_ = function(pDivId){ <br><br> <BR> pObj = aniObjs[pDivId]; <br><br> var w = parseInt(pObj.obj.style.width); <BR> var h = parseInt(pObj.obj.style.height); <br><br> if(w >= Math.abs(pObj.targetSize.w) && h >= Math.abs(pObj.targetSize.h)){ <BR> clearInterval(pObj.interval); <BR> if(document.all) <BR> pObj.obj.style.filter = "Alpha(opacity=" + pObj.alpha.e + ")"; <BR> else <BR> pObj.obj.style.opacity = pObj.alpha.e / 100; <br><br> <br><br> delete aniObjs[pObj.obj.id]; <BR> }else{ <BR> if(w < Math.abs(pObj.targetSize.w)) <BR> w += pObj.step.x; <br><br> if(h < Math.abs(pObj.targetSize.h)) <BR> h += pObj.step.y; <br><br> if(document.all){ <BR> var pattern = /opacity=(\d{1,3})/; <BR> var result = pattern.exec(pObj.obj.style.filter); <BR> if(result != null){ <BR> if(result[1] < pObj.alpha.e) <BR> pObj.obj.style.filter = "Alpha(opacity=" + (result[1] + pObj.alpha.t) + ")" <BR> else <BR> pObj.obj.style.filter = "Alpha(opacity=" + pObj.alpha.e + ")"; <BR> } <BR> }else{ <BR> if(pObj.obj.style.opacity < pObj.alpha.e / 100){ <BR> pObj.obj.style.opacity = parseFloat(pObj.obj.style.opacity) + pObj.alpha.t / 100; <BR> }else <BR> pObj.obj.style.opacity = pObj.alpha.e / 100; <BR> } <BR> } <br><br> pObj.obj.style.width = w + "px"; <BR> pObj.obj.style.height = h + "px"; <br><br> if(pObj.targetSize.w < 0){ <BR> var vLeft = parseInt(getCurrentStyleProperty(pObj.obj,"left")); <BR> vLeft = isNaN(vLeft) ? 0 : vLeft; <BR> pObj.obj.style.left = vLeft - pObj.step.x + "px"; <BR> } <br><br> if(pObj.targetSize.h < 0){ <BR> var vTop = parseInt(getCurrentStyleProperty(pObj.obj,"top")); <BR> vTop = isNaN(vTop) ? 0 : vTop; <BR> pObj.obj.style.top = vTop - pObj.step.y + "px"; <BR> } <BR> } <BR>} <br><br>var ani = new JAni(); <BR> ani.popup( <BR> "apDiv1", <BR> {w:50,h:50}, //初始长宽 <BR> {w:200,h:200}, //目标长宽 <BR> {x:8,y:8}, //步长 <BR> {s:10,e:80,t:10}//透明度 起始，结束，步长 <BR> ); <br><br> ani.popup( <BR> "apDiv2", <BR> {w:50,h:50}, //初始长宽 <BR> {w:-200,h:200}, //目标长宽 <BR> {x:8,y:8}, //步长 <BR> {s:10,e:40,t:2}//透明度 起始，结束，步长 <BR> ); <br><br> ani.popup( <BR> "apDiv3", <BR> {w:50,h:50}, //初始长宽 <BR> {w:-200,h:-200},//目标长宽 <BR> {x:8,y:8}, //步长 <BR> {s:10,e:40,t:10}//透明度 起始，结束，步长 <BR> ); <br><br> ani.popup( <BR> "apDiv4", <BR> {w:50,h:50}, //初始长宽 <BR> {w:200,h:-200},//目标长宽 <BR> {x:8,y:8}, //步长 <BR> {s:10,e:50,t:10}//透明度 起始，结束，步长 <BR> ); <BR></script>