（42）JS运动之多物体框架--多个div变宽

假设仅仅为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.οnlοad=function (){var aDiv=document.getElementsByTagName('div');for(var i=0;i<aDiv.length;i++){  aDiv[i].timer=null;//自己定义属性，加一个定时器aDiv[i].οnmοuseοver=function (){startMove(this,400);};aDiv[i].οnmοuseοut=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变宽相关推荐

html点击展开盒子变大,JS实现点击按钮控制Div变宽、增高及调整背景色的方法
本文实例讲述了JS实现点击按钮控制Div变宽.增高及调整背景色的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现点击按钮后改变DiV的高度.宽度和背景色等,点击对应按钮,Div ...
（36）JS运动之使物体向右运动
基本思路:样式要是绝对定位,不然的话根本走不起来.当开启一个定时器的时候.必须先清除定时器.这是为了防止鼠标连续点击button而开启多个定时器,导致物体的速度加快等原因,其次要控制好物体的运动和停止 ...
javascript从入门到跑路-----小文的js学习笔记（25）------运动框架----匀速运动、缓冲运动、多物体运动、链式运动
** javascript从入门到跑路-----小文的js学习笔记(1)---------script.alert.document.write() 和 console.log 标签 javascri ...
js运动应用之运动框架
js运动应用之运动框架 <style>div{width:200px;height:200px;background-Color:yellow;float:left;font-size:1 ...
js运动-完美运动框架
在上一篇的<js运动-同时运动>中说过,我们的运动框架还存在一个问题,那究竟是什么问题那?把上一篇的程序做一下调整 oDiv.onmouseover = function () {//st ...
（43）JS运动之链式运动框架
链式运动框架就是一系列的运动分阶段进行,在普通的运动框架上加上一个参数function,这个function表示下一个要执行的动作,具体代码如下: <!DOCTYPE HTML> < ...
js运动动画的八个知识点
今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval( ...
JS运动从入门到兴奋1
hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...
js运动（一）—— sidebar(分享到)
1.前言在一些网页中,经常可以看到边框上,有一个"分享到"的小标签,鼠标进入后,划出一个小框,上面是微信.QQ等选项.这个效果可以使用js运动来实现. 尽管在现实开发中,运动可能 ...
php cms 轮播图,原生JS运动实现轮播图
原生JS运动实现轮播图 **基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到 ...

（42）JS运动之多物体框架--多个div变宽

（42）JS运动之多物体框架--多个div变宽相关推荐

最新文章

热门文章