多物体运动框架案例一：多个Div的宽度运动变化

多物体运动框架，鼠标移入Div，此Div逐渐变宽，鼠标移出后，此Div逐渐缩短恢复原长度。

<!doctype html>
<html>
<head>
<title>运动</title>
<meta charset="utf-8">
<style>
html{font-family:楷体;}
div{width:100px;height:50px;background:red;margin:10px;}
</style>
<script>
window.onload=function()
{
    var aDiv=document.getElementsByTagName('div');
    for(var i=0;i<aDiv.length;i++)
    {
        aDiv[i].timer=null;
        aDiv[i].onmouseover=function()
        {
            startMove(this,400);
        }
        aDiv[i].onmouseout=function()
        {
            startMove(this,100);
        }
    }
    //var timer=null;
    function startMove(obj,iTarget)
    {
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            var speed=(iTarget-obj.offsetWidth)/6;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(obj.offsetWidth==iTarget)
            {
                clearInterval(obj.timer);
            }
            else
            {
                obj.style.width=obj.offsetWidth+speed+'px';
            }
        },30)
    }
}
</script>
</head>
<body style='height:2000px;'>

<div ></div>
<div></div>
<div></div>
</body>
</html>
核心：为每一个div定义一个单独的定时器，从逻辑层面上确保定时器之间互不影响。
问题（1）for循环中变量i所能影响的范围是什么？像下面这样定义每个Div的定时器为什么控制台会报错？
for(var i=0;i<aDiv.length;i++)
    {
        
        aDiv[i].onmouseover=function()
        {
                        aDiv[i].timer=null;
            startMove(this,400);
        }
        aDiv[i].onmouseout=function()
        {
            startMove(this,100);
        }
    }
 

posted @ 2018-08-02 17:32  请叫我二狗哥  阅读(316)  评论(0)    收藏  举报