假设仅仅为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. Minimum Height Trees -- LeetCode

    For a undirected graph with tree characteristics, we can choose any node as the root. The result gra ...

  2. Linux使用pyVLfeat库做Dense sift提示段错误（segmentation fault）详细分析

    pyVLfeat是著名的图像处理库VLFeat在python上的接口包.在linux环境下使用该库提示“段错误”.百度后得知: 所谓的段错误就是指访问的内存超出了系统所给这个程序的内存空间 意思其实就 ...

  3. MATLAB/Octave中implicit conversion from real matrix to real scalar错误原因与解决

    写程序时提示 implicit conversion from real matrix to real scalar的一个warning,主要问题在于将一个矩阵当成一个标量在使用.我的程序出现这个wa ...

  4. Pointers and Strings

    The special relationship between arrays and pointers extends to C-style strings.Consider the followi ...

  5. Netty游戏服务器之六服务端登录消息处理

    客户端unity3d已经把消息发送到netty服务器上了,那么ServerHandler类的public void channelRead(ChannelHandlerContext ctx, Obj ...

  6. ！！！ # @ --- ODATA 云驱动 --- 数据库发布 RESTFUL API

    Cloud Drivers   ODATA 云驱动   http://www.cdata.com/cloud/ Makes on-premise & cloud data sources ea ...

  7. 为什么深度神经网络难以训练Why are deep neural networks hard to train?

    Imagine you're an engineer who has been asked to design a computer from scratch. One day you're work ...

  8. Eight_pku_1077(广搜).java

    Eight Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 21718   Accepted: 9611   Special ...

  9. MySQL分库备份与分表备份

    MySQL分库备份与分表备份 1.分库备份 要求:将mysql数据库中的用户数据库备份,备份的数据库文件以时间命名 脚本内容如下: [root@db01 scripts]# vim backup_da ...

  10. 编译安装mysql-5.6.40

    编译安装mysql-5.6.40 环境说明 系统版本     CentOS 7.2 x86_64 软件版本     mysql-5.6.40 [root@db01 ~]# mkdir -p /serv ...