<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>untitled document</title> <style type=" Text/css "> <!--#apDiv1 {PO Sition:absolute; left:300px; top:100px; width:100px; height:100px; Z-index:1; Background-color: #FF00FF; } #apDiv2 {Position:absolute; left:402px; top:100px; width:100px; height:100px; Z-index:2; Background-color: #00FFFF; } #apDiv3 {Position:absolute; left:402px; top:200px; width:100px; height:100px; Z-index:3; Background-color: #99FF00; } #apDiv4 {Position:absolute; left:300px; top:200px; width:100px; height:100px; Z-index:4; Background-color: #FFFF00; }--> </style> </pead> <body> <div id= "ApDiv1" ></div>;d IV id= "APDIV2" ></div> <div id= "ApDiv3" ></div> <div id= "ApDiv4" ></div> </body > </ptml> <script language= "javascript" type= "Text/javascript" > function $ (pId) {return Document.getel Ementbyid (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}; Initial long Width this.targetsize = {w:100,y:100}; Target long width this.step = {X:10,y:10}; Step x:x Direction y:y Direction This.alpha = {S:10,e:90,t:10}; Transparency, s initial, E end, T step} 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] + p OBJ.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},//initial long width {w:200,h:200},//target long width {x:8,y:8},//step {s:10,e:80,t:10}/ /transparency start, end, step length); Ani.popup ("ApDiv2", {w:50,h:50},//initial long width {w:-200,h:200},//target long width {x:8,y:8},//step {s:10,e:40,t:2}/ /transparency start, end, step length); Ani.popup ("ApDiv3", {w:50,h:50},//Initial long width {w:-200,h:-200},//target long width {x:8,y:8},//step {s:10,e:40,t:10}//Transparency start, end, step length); Ani.popup ("ApDiv4", {w:50,h:50},//initial long width {w:200,h:-200},//target height-to-width {x:8,y:8},//step {s:10,e:50,t:10}/ /transparency start, end, step length); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
