多物体运动框架，鼠标移入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的宽度运动变化的更多相关文章

  1. javascript链式运动框架案例

    javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...

  2. 【repost】JavaScript完美运动框架的进阶之旅

    运动框架的实现思路 运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓 ...

  3. js运动框架逐渐递进版

    运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...

  4. JavaScript 基础入门11 - 运动框架的封装

    目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调,链式运动 缓冲运动 加入缓冲的运动框架 案例1 多图片展开收缩 运动的留言本 Ja ...

  5. javascript运动框架

    下面这个一个运动框架可以控制元素在一个属性上的运动,同时,可以调用回调函数. /* 获取元素某个属性的值 @obj: 对象 @attr: 属性值 */ function getStyle(obj, a ...

  6. Javascript之运动框架2

    运动框架2与运动框架1的不同之处在于,运动框架2是框架1的升级版,首先完善了传入值,改为move(obj,json,options),在options里面,可以选择传入或者不传入时间,运动形式,以及函 ...

  7. day40—JavaScript多物体运动框架

    转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...

  8. JavaScript的运动框架学习总结

    一.目录 1. 入门案例——实现匀速运动 2. 入门案例——实现缓冲运动 3. 实现任意值的运动框架v.1 4. 改进任意值的运动框架v.2 5. 改进任意值的运动框架v.3 6. 实现链式运动框架 ...

  9. js运动框架之掉落的扑克牌（重心、弹起效果）

    玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图:    这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...

随机推荐

  1. Luogu P4014 「 网络流 24 题 」分配问题

    解题思路 还是建立超级源点和超级汇点,又因为题目给出规定一个人只能修一个工件,所以建图的时候还要讲容量都设为$1$. 人的编号是$1\rightarrow n$,工件的编号是$n+1\rightarr ...

  2. db2层级查询

    CREATE VIEW v_orgtype99 asSELECT t1.SYS_ORG_TYPE_NAME top_name1, t2.SYS_ORG_TYPE_NAME top_name2, --若 ...

  3. linux cmp-比较两个文件是否有差异

    推荐:更多Linux 文件查找和比较 命令关注:linux命令大全 cmp命令用来比较两个文件是否有差异.当相互比较的两个文件完全一样时,则该指令不会显示任何信息.若发现有差异,预设会标示出第一个不通 ...

  4. session对象的使用

    session对象的使用 制作人:全心全意 session在网络中被称为会话.由于HTTP协议是一种无状态协议,也就是当一个客户向服务器发出请求,服务器接收请求,并返回响应后,该连接就结束了,而服务器 ...

  5. JSOI最大值 （线段树）

    change 单点修改 query 区间最值 Program XJOI2321; ; ..maxn*] of longint; i,m,n,ans,p,x:longint; ch:char; func ...

  6. alpha版出炉，实现win2008 service的session 0穿透

    指定用户名,拿最小session,实现和用户ui交互. 这样,搞windows的自动化部署,就可以向前一大步啦. 比以前用psexec要用户名密码,指定session要先进多啦. 安全保密性也提高了. ...

  7. [poj2311]Cutting Game_博弈论

    Cutting Game poj-2311 题目大意:题目链接 注释:略. 想法: 我们发现一次操作就是将这个ICG对应游戏图上的一枚棋子变成两枚. 又因为SG定理的存在,记忆化搜索即可. 最后,附上 ...

  8. [bzoj1084][SCOI2005]最大子矩阵（DP）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1084 分析: m=1时:相当于只有一行数,让你取出p段,使得总和最大 明显可以DP,f ...

  9. [Vue @Component] Switch Between Vue Components with Dynamic Components

    A common scenario is to present different components based on the state of the application. Dynamic ...

  10. linux文档权限

    1.登录 root 用户:su - mac一开始进入创建的用户是具有管理员权限的用户,但是密码却不是进入 root 用户的密码,可以使用 sudo su - 免密进入 root 用户. 2.退出 ro ...