Heim > Web-Frontend > js-Tutorial > Hauptteil

JS动画效果代码3_javascript技巧

WBOY
Freigeben: 2016-05-16 19:05:32
Original
917 Leute haben es durchsucht

慢慢来,这次实现了向任意方向扩展!

复制代码 代码如下:

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

 
    
 
    
 
 
 
 
 
<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> 
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage