非常基础的JS动画演示

这个例子使用setTimeout实现非常简单的动画效果。

<style type="text/css">
div{
    height:200px;
    width:600px;
    background-color:#CCCCCC;
}
#test1
{
    background:#99CC00;
    position:fixed;
    left:300px;
    filter:alpha(opacity=0);
}
</style>

 

<div id="test1"></div>
<button onclick="doSome()">测试</button>

 

<script language="javascript">
function $(id)
{
    return document.getElementById(id);
}
function doSome()
{
    this.fadeIn($("test1"));
}

function setOpacity(obj,value)
{
    //debugger;
    if(obj.filters)    
    {
        obj.style.filter='alpha(opacity='+value+')';
    }
    else
        obj.style.opacity=value/100;
    
}

function fadeIn(obj)
{
    for(var i=0;i<=100;i+=5)
    {
        (function(){
            var pos=i;
            setTimeout(function(){setOpacity(obj,pos);},(pos+1)*10);
        }
        )();
    }
}
</script>