<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> #divid{width:30px; height:30px;left:200px;top:0px;background:#666;position:absolute;opacity:0.1;filter:alpha(opacity=10);} span{display:block;padding:5px; cursor:pointer;font-size:12px;} </style> <script> //如果事件中有opacity屬性：則頁面樣式中要定義：opacity:0.1;filter:alpha(opacity=10); function spaceTo(id,u,mx,fun) { var o=$(id),n,s=/*@cc_on!@*/false,t=u+u*(u-1)/2;//遞增總數; for(n in mx){mx[n]=li(n);} clearInterval(window[id+"spaceTo"]);window[id+"spaceTo"]=setInterval(mov,10); function mov() { for(n in mx) { mx[n][1]=mx[n][1]+mx[n][3]*u; mx[n][0][n]=n=="opacity"&&!s?Math.round(mx[n][1])*0.01:Math.round(mx[n][1])+mx[n][4]; } if(u==1){clearInterval(window[id+"spaceTo"]);}else{u--;} } function li(name)//屬性，原始值，目標值，遞增步長，單位 { switch (name) { case "width": return [o.style,o.offsetWidth,mx["width"],(mx["width"]-o.offsetWidth)/t,"px"]; case "height": return [o.style,o.offsetHeight,mx["height"],(mx["height"]-o.offsetHeight)/t,"px"]; case "left": return [o.style,o.offsetLeft,mx["left"],(mx["left"]-o.offsetLeft)/t,"px"]; case "top": return [o.style,o.offsetTop,mx["top"],(mx["top"]-o.offsetTop)/t,"px"]; case "scrollTop":return [o,o.scrollTop,mx["scrollTop"],(mx["scrollTop"]-o.scrollTop)/t,0]; case "scrollLeft":return[o,o.scrollLeft,mx["scrollLeft"],(mx["scrollLeft"]-o.scrollLeft)/t,0]; case "opacity":return s?[o.filters.alpha,o.filters.alpha.Opacity,mx["opacity"],(mx["opacity"]-o.filters.alpha.Opacity)/t,0]: [o.style,o.style.opacity*100,mx["opacity"],(mx["opacity"]-o.style.opacity*100)/t,0]; } } } function $(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}} </script> </head> <body> <span onclick="spaceTo('divid',20,{'width':500})">左放大</span> <span onclick="spaceTo('divid',20,{'width':10})">左縮小</span> <span onclick="spaceTo('divid',20,{'height':500})">高放大</span> <span onclick="spaceTo('divid',20,{'height':10})">高縮小</span> <span onclick="spaceTo('divid',20,{'left':200})">左移動</span> <span onclick="spaceTo('divid',20,{'left':700})">右移動</span> <span onclick="spaceTo('divid',20,{'opacity':100})">透明加</span> <span onclick="spaceTo('divid',20,{'opacity':20})">透明減</span> <span onclick="spaceTo('divid',20,{'width':1000,'height':200,'left':300,'top':300,'opacity':100})">聯動1</span> <span onclick="spaceTo('divid',20,{'width':11,'height':10,'left':100,'top':100,'opacity':10})">聯動2</span> <span id="abc"></span> <div id="divid"></div> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
