多物体运动框架案例一：多个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);

        }

    }

巴特西

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

最新文章

热门文章