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

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

  1. function getStyle(obj, name)
  2. {
  3. 	if(obj.currentStyle)
  4. 	{
  5. 		return obj.currentStyle[name];
  6. 	}
  7. 	else
  8. 	{
  9. 		return getComputedStyle(obj, false)[name];
  10. 	}
  11. }
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <style>
  7. div{
  8. 	width:100px;
  9. 	height:50px;
  10. 	background:red;
  11. 	margin:10px;
  12. }
  13.  
  14. </style>
  15.  
  16. <script>
  17.  
  18. window.onload=function (){
  19. 	var aDiv=document.getElementsByTagName('div');
  20. 	for(var i=0;i<aDiv.length;i++)
  21. 	{
  22. 		aDiv[i].timer=null;//自己定义属性，加一个定时器
  23. 		aDiv[i].onmouseover=function ()
  24. 		{
  25. 			startMove(this,400);
  26. 		};
  27. 		aDiv[i].onmouseout=function ()
  28. 		{
  29. 			startMove(this,100);
  30. 		};
  31. 	}
  32. };
  33.  
  34. var timer=null;
  35. function startMove(obj, iTarget)
  36. {
  37. 	clearInterval(obj.timer);
  38. 	obj.timer=setInterval(function (){
  39. 		var speed=(iTarget-obj.offsetWidth)/6;
  40. 		speed=speed>0?
  41.  
  42. Math.ceil(speed):Math.floor(speed);
  43.  
  44. 		if(obj.offsetWidth==iTarget)
  45. 		{
  46. 			clearInterval(obj.timer);
  47. 		}
  48. 		else
  49. 		{
  50. 			obj.style.width=obj.offsetWidth+speed+'px';
  51. 		}
  52. 	}, 30);
  53. }
  54.  
  55. </script>
  56. </head>
  57. <body  >
  58.      <div ></div>
  59.      <div ></div>
  60.      <div ></div>  
  61.  
  62. </body>
  63. </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. AGC 012 D - Colorful Balls

    题面在这里! 为什么atcoder都是神仙题啊qwq 首先发现如果要让 x,y 互换位置的话,要么通过他们直接换 (也就是x和y满足两种操作之一),要么间接换,通过一些其他的元素形如 x可以和 a[1 ...

  2. 【线段树】hihocoder 1586 ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛 I. Minimum

    题意:给你一个序列(长度不超过2^17),支持两种操作:单点修改:询问区间中最小的ai*aj是多少(i可以等于j). 只需要线段树维护区间最小值和最大值,如果最小值大于等于0,那答案就是minv*mi ...

  3. Java编程思想学习(四)----第四章：控制执行流程

    在Java中,涉及的关键字包括if-else.while.do-while.for.return.break 以及选择语句switch.然而,Java并不支持goto语句(该语句引起许多反对意见,但它 ...

  4. JS解决URL传递参数中文乱码问题

    function getUrlParam(name){ // 用该属性获取页面 URL 地址从问号 (?) 开始的 URL(查询部分) var url = window.location.search ...

  5. session cookie的区别最全总结

    作为一名WEB开发程序员,对session的理解是最基础的,但是现状是WEB程序员遍地都是,随便一划拉一大把,不过估计能把session能透彻理解的人应该不是很多,起码我之前对此是知之甚少,偶然看到的 ...

  6. 通过现有数据导出新表SQL

    Date: 20140217 Auth: JIN 需求: 导出一个表的两个列的表的SQL语句(包含数据) 方法:创立一个临时表 mysql> desc kw_keywords;+-------- ...

  7. linux命令查看开放哪些端口

    netstat -nupl (UDP类型的端口)netstat -ntpl (TCP类型的端口) a 表示所有 n表示不查询dns t表示tcp协议 u表示udp协议 p表示查询占用的程序 l表示查询 ...

  8. HDU 2859 Phalanx （DP）

    Phalanx Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  9. winform 使用SplashScreen窗口

    SplashScreen,就是平时我们说的溅射屏幕,任何一个做过客户端程序的coder应该对它都不陌生,因为它能提升用户体验,让软件看上去更美.SplashScreenForm通常进入程序时是打开,主 ...

  10. 创建maven web项目无法创建sec目录

    创建maven web项目无法创建sec目录 解决方法:-DarchetypeCatalog=internal