js淡入淡出

示例:　js淡入淡出 

 

原理：更改css不透明数值

 

知识点：

css不透明

filter:alpha(opacity:30); opacity:0.3;}

 

小技巧：

小于临界值，做加速

大于临界值，做减速

 

html部分

<div id="div1"></div>

<style>
#div1 { width:100px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;}
</style>

 

js部分

<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    oDiv.onmouseover=function ()
    {
        startMove(100);
    };
    oDiv.onmouseout=function ()
    {
        startMove(30);
    };
};

var alpha=30;
var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');
    
    clearInterval(timer);
    timer=setInterval(function (){
        var speed=0;
        
        if(alpha<iTarget)    //小于临界值，做加速。同理，反之，亦然
        {
            speed=10;
        }
        else
        {
            speed=-10;
        }
        
        if(alpha==iTarget)
        {
            clearInterval(timer);
        }
        else
        {
            alpha+=speed;
            
            oDiv.style.filter='alpha(opacity:'+alpha+')';
            oDiv.style.opacity=alpha/100;
        }
    }, 30);
}
</script>