JavaScript 高级课程之缓冲收缩(多个DIV),谈入谈出

本文链接：https://blog.csdn.net/yuqidai/article/details/51612836

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 高级课程之缓冲收缩(多个DIV),谈入谈出</title>
<style>
div { width:100px ; height:100px; margin-top:10px; background-color:#FF0004; filter:alpha(opacity:10); opacity:0.1;}
</style>
<script>
window.onload = function(){
    var aDiv = document.getElementsByTagName('div');
    for(var i=0; i<aDiv.length; i++){
        aDiv[i].alpha = 10;   // 每个DIV设置透明度
        aDiv[i].Timer = null; // 每个DIV设置定时器
        aDiv[i].onmouseover = function(){
            startMove(this,100);
            }
        aDiv[i].onmouseout = function(){
            startMove(this,10);
            }
        }
    }
function startMove(obj, iT){
    clearInterval(obj.Timer);
    obj.Timer = setInterval(function(){
        var iSeppd =  (iT - obj.alpha)/8;
        iSeppd = iSeppd>0?Math.ceil(iSeppd):Math.floor(iSeppd);
        if(obj.alpha == iT){
                clearInterval(obj.Timer);
            }else{
                obj.alpha += iSeppd;
                obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
                obj.style.opacity = obj.alpha/100;
                obj.innerHTML = obj.alpha;
            }
        },20)
    }
</script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>