<div class="htmlarea"> <textarea id="runcode84269"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>제목 없는 문서</title> <style type="text/css"> <!-- #apDiv1 { position: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> <div id="apDiv1"></div> <div id="apDiv2"></div> <div id="apDiv3"></div> <div id="apDiv4"></div> </textarea> <br><input onclick="runEx('runcode84269')" type="button" value="运行代码"><input onclick="doCopy('runcode84269')" type="button" value="复制代码"> <input onclick="doSave(runcode84269)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">[Ctrl A 모두 선택 참고: </a>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 </div>]<script language="javascript" type="text/javascript"> 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}//透明度 起始,结束,步长 ); </script>