多物体运动框架，鼠标移入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. java 十三周总结

  2. linux设置系统时间与各种阻塞

    前阵子做了一个P2P的通信系统,发现开机的时候和中间运行的时候会莫名报错,这个问题找了好久,后来从日志中看出来,所有节点上阻塞的操作同时超时. 而在超时左右,有新节点自动加入系统. 在新节点加入系统的 ...

  3. 51nod 1285 山峰和分段

    [题解] 枚举n的各个因数作为段长,O(n)判断每一段内是否有山峰即可. #include<cstdio> #include<cstring> #include<algo ...

  4. 恶补数论(二)　Baby-Step-Giant-Step 大步小步求离散模对数

    知识概述 好吧,我承认这是我初三寒假就听过的知识,然而我现在早就高一了(又是寒假,只不过我已经在省选了．．．) 额,这是求离散模对数的一种算法 也就是求满足方程a^x≡b(mod p)的最小的x(其中 ...

  5. Spring Security核心类关系图

    以有限的脑力记忆无限的Knowledge,多画图,多画图,多画图. 核心类Authentication 和 GrantedAuthority AbstractAuthenticationToken 由 ...

  6. RequestMapping_请求参数&请求头

    params和headers支持简单的表达式: --param1:表示请求必须包含名为param1的请求参数. --!param1:表示请求不能包含名为param1的请求参数. --param1 != ...

  7. SQL to MongoDB Mapping Chart

    http://docs.mongodb.org/manual/reference/sql-comparison/ In addition to the charts that follow, you ...

  8. P1009 阶乘之和 洛谷

    https://www.luogu.org/problem/show?pid=1009 题目描述 用高精度计算出S=1!+2!+3!+…+n!(n≤50) 其中“!”表示阶乘,例如:5!=54321. ...

  9. 《Sams Teach Yourself Windows® Workflow Foundation in 24 Hours》读书笔记目录

    目录 1 Part I - The Basics 1.1 Hour 1 - Understanding Windows Workflow Foundation 1.2 Hour 2 - A Spin ...

  10. Cocos2d-X中的菜单

    在Cocos2d-X实现显示菜单的方式比較特殊,首先须要使用CCMenu创建一个菜单,然后使用CCMenuItem创建一个菜单项,实际上程序中显示的菜单是使用CCMenu和CCMenuItemFont ...