首页 > 网络编程 > JavaScript > javascript技巧 > javascript 缓冲效果

javascript 缓冲效果实现代码

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属性：则页面样式中要定义：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> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript 缓冲效果 实现代码

您可能感兴趣的文章:

javascript 缓冲效果实现代码