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

最新推荐文章于 2022-08-25 09:07:44 发布

weixin_33828101

最新推荐文章于 2022-08-25 09:07:44 发布

阅读量86

点赞数

原文链接：http://www.cnblogs.com/f6056/p/9408511.html

版权

多物体运动框架，鼠标移入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);
        }
    }

转载于:https://www.cnblogs.com/f6056/p/9408511.html

weixin_33828101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多物体运动框架案例一：多个Div的宽度运动变化

多物体运动框架，鼠标移入Div，此Div逐渐变宽，鼠标移出后，此Div逐渐缩短恢复原长度。<!doctype html><html><head><title>运动</title><meta charset="utf-8"><style>html{font-family:楷体;...
复制链接

扫一扫