javascript 緩沖效果實(shí)現(xiàn)代碼

更新時(shí)間：2009年06月19日 22:06:57 作者：

非常漂亮的緩沖效果代碼，大家可以看看下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <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屬性：則頁(yè)面樣式中要定義：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;//遞增總數(shù);     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)//屬性，原始值，目標(biāo)值，遞增步長(zhǎng)，單位     {         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})">左移動(dòng)</span> <span onclick="spaceTo('divid',20,{'left':700})">右移動(dòng)</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})">聯(lián)動(dòng)1</span> <span onclick="spaceTo('divid',20,{'width':11,'height':10,'left':100,'top':100,'opacity':10})">聯(lián)動(dòng)2</span> <span id="abc"></span> <div   class="geikaq8"   id="divid"></div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: