假设仅仅为div加入一个定时器的话。在多个div变宽的时候会发生故障。可是假设为每一个div加入一个定时器。那么就能够实现多个物体变宽。

注意：在多物体运动的情况下，全部东西不能共用。offsetXXX会跟border冲突导致不能得到想要的结果。在这里能够用getStyle（）函数取代。

function getStyle(obj, name)

{

	if(obj.currentStyle)

	{

		return obj.currentStyle[name];

	}

	else

	{

		return getComputedStyle(obj, false)[name];

	}

}

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

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  >

     <div ></div>

     <div ></div>

     <div ></div>  

</body>

</html>

效果图：

（42）JS运动之多物体框架--多个div变宽的更多相关文章

  1. js运动：多div变宽、二级菜单

    定时器及运动函数. 多div变宽: <!-- Author: XiaoWen Create a file: 2016-12-13 09:36:30 Last modified: 2016-12- ...

  2. （36）JS运动之使物体向右运动

    基本思路:样式要是绝对定位,不然的话根本走不起来.当开启一个定时器的时候.必须先清除定时器.这是为了防止鼠标连续点击button而开启多个定时器,导致物体的速度加快等原因,其次要控制好物体的运动和停止 ...

  3. JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JavaScript学习总结【11】、JS 运动

    动画效果在网站中是一种非常常见的交互式体验效果,比如侧边栏分享.图片淡入淡出,我们把这种动画效果就叫做运动,也就是让物体动起来.如果想让一个物体动起来,无非就是改变它的速度,也就是改变属性值,比如 l ...

  5. 第十节 JS运动中级

    链式运动框架. 回调函数 运动停止时,执行函数 运动停止时,开始下一次运动 <!DOCTYPE html> <html lang="en"> <hea ...

  6. 第九节 JS运动应用

    多物体运动框架 多个物体同时运动 例子:多个Div,鼠标移入变宽 单定时器,存在问题 每个Div一个定时器 <!DOCTYPE html> <html lang="en&q ...

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

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

  8. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  9. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

随机推荐

  1. 配置无线AP 采用POE供电模块怎么配置无线AP没有POE交换机

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 采用POE供电模块怎么配置无线AP没有POE交换机 IP-com f130ap http ...

  2. 在intellij idea 中进行android 单元测试

    本次用来测试的代码是sqlite进行数据操作. ######右键选择要进行单元测试的应用 #############弹出选择框,选择Android>Test Module>Next ### ...

  3. luogu P1339 [USACO09OCT]热浪Heat Wave

    题目描述 The good folks in Texas are having a heatwave this summer. Their Texas Longhorn cows make for g ...

  4. [Atcoder Grand Contest 004] Tutorial

    Link: AGC004 传送门 A: …… #include <bits/stdc++.h> using namespace std; long long a,b,c; int main ...

  5. [2018湖南省队集训] 6.28 T2 color

    毒瘤计数题2333,(小声)k其实可以出到1e9,不过这样求组合数的时候就要记1000种数的1~1000次下降幂(用到的组合数中第一维在1e9级别的只有1000种左右,第二维都是<=1000), ...

  6. SD 一轮集训 day4 弦形袋鼠

    可以发现把每一个 a[i] * b[i] 加到矩阵里去,就相当于 把一个 1*m 的向量伸缩后变成 n个再加到矩阵里去,所以答案就是远=原矩阵中线性线性无关组的个数. (而且好像一个矩阵横着消元和竖着 ...

  7. 【二分】【三分】【计算几何】XIII Open Championship of Y.Kupala Grodno SU Grodno, Saturday, April 29, 2017 Problem L. Lines and Polygon

    题意:给你一个凸多边形,和多次询问,每次询问给你一条直线,问你这条直线与凸包上的顶点的最近距离是多少. 记当前询问的直线的斜率为K, 先找到与这条直线距离最远的两个点: 就把凸包所有的边当做有向直线进 ...

  8. 【BFS】bzoj1054 [HAOI2008]移动玩具

    暴搜吧,可以哈希一下,但是懒得写哈希了,所以慢得要死. Code: #include<cstdio> #include<queue> #include<set> # ...

  9. android系统各种音量的获取与设置

    获取系统音量 通过程序获取android系统手机的铃声和音量.同样,设置铃声和音量的方法也很简单! 设置音量的方法也很简单,AudioManager提供了方法: publicvoidsetStream ...

  10. [CF843D]Dynamic Shortest Path

    [CF843D]Dynamic Shortest Path 题目大意: 给定一个带权有向图,包含\(n(n\le10^5)\)个点和\(m(m\le10^5)\)条边.共\(q(q\le2000)\) ...