非常基础的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>

 

非常基础的JS动画演示非常基础的JS动画演示Code
<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>

 

 

上一篇:mysql找出锁等待


下一篇:做智能世界的乘风者,讲述“我与阿里云IoT”的故事