<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <style> #divid {width:30px height:30px;left:200px;top:0px;background: #666;p osition: Absolute;opacity:0.1;filter:alpha (opacity=10);} span{display:block;padding:5px; cursor:pointer;font-size:12px;} </style> <script>//If there are opacity attributes in the event: the page style is defined: 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;//increment total; 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)/attribute, original value, target value, increment step, Unit {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> </pead> <body> <span onclick= "Spaceto (' divID ', 20,{' width ':})" > Left amplification </span > <span onclick= "spaceto (' divID ', 20,{' width ':})" > Left narrowing </span> <span onclick= "Spaceto (' divID ', 20, {' Height ': 500}) ' > High magnification </span> <span onclick= "Spaceto (' divID ', 20,{' height ':})" > High reduction </span> <span onclick= " Spaceto (' divID ', 20,{' left ') ' > Move </span> <span onclick= "Spaceto (' divID ', 20,{' left ': M})" > Right Move </span> <span onclick= "Spaceto (' divID ', 20,{' opacity ':})" > Transparency plus </span> <span onclick= "Spaceto (' divID ', 20,{' opacity ':}) "> Transparency minus </span> <span onclick=" Spaceto (' divID ', 20,{' width ': 1000, ' height ': 200 , ' Left ': +, ' top ': $, ' opacity ': (+}) ' > Linkage 1</span> <span onclick= "Spaceto" (' divID ', 20,{' width ': one, ' height ': ten, ' left ': M, ' top ': M, ' opacity ':}) "> Linkage 2</span> < Span id= "abc" ></span> <div id= "divID" ></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
