時間をかけて、今度はどの方向にも拡張できます。 コードをコピー コードは次のとおりです: Untitled Document <br><!-- <BR>#apDiv1 { <BR> position:absolute; <BR> left:300px; <BR> top:100px; <BR> width:100px; <BR> height:100px; <BR> z-index:1; <BR> background-color: #FF00FF; <BR>} <BR>#apDiv2 { <BR> position:absolute; <BR> left:402px; <BR> top:100px; <BR> width:100px; <BR> height:100px; <BR> z-index:2; <BR> background-color: #00FFFF; <BR>} <BR>#apDiv3 { <BR> position:absolute; <BR> left:402px; <BR> top:200px; <BR> width:100px; <BR> height:100px; <BR> z-index:3; <BR> background-color: #99FF00; <BR>} <BR>#apDiv4 { <BR> position:absolute; <BR> left:300px; <BR> top:200px; <BR> width:100px; <BR> height:100px; <BR> z-index:4; <BR> background-color: #FFFF00; <BR>} <BR>--> <br> <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>関数 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> }キャッチ(e){ <br> アラート(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> ステップ = pステップ; <br> アルファ = pアルファ; <br><br> with(obj.style){ <br> オーバーフロー = 「非表示」; <br> 位置 = 「絶対」; <br> 幅 = pOrgSize.w "px"; <br> 高さ = pOrgSize.h "px"; <br> 左 = orgPos.x "px"; <br> top = orgPos.y "px"; <br> if(document.all){ <br> filter = "Alpha(opacity=" pAlpha.s ")"; <br> }else <br> 不透明度 = 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 : v左; <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 : vトップ; <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>