多物体的运动，实现切换
Posted 愚小子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多物体的运动，实现切换相关的知识，希望对你有一定的参考价值。
上面一篇简要指明了多物体的淡入淡出，主要是把握定时器的用法与参数及速度的处理，这篇介绍一下多个物体的运动，和单个物体的运动有点区别。
下面是写一些简要代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div { width: 100px;height: 50px;background: red;margin-top: 30px; border: 3px solid black;}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName(‘div‘);
var i=0;
for(i=0;i<oDiv.length;i++){
oDiv[i].timer = null; //设置多个定时器，给定时器一个索引值
oDiv[i].onmouseover = function(){
setMove(this,300); //为当前的div加上样式，后面一个参数是要设置的目标值
}
oDiv[i].onmouseout = function(){
setMove(this,100);
}
}
};
function setMove(obj,iTarget){ //设置多个参数
var timer = null;
clearInterval(obj.timer); //在开启定时器之前，关闭当前的定时器
obj.timer = setInterval(function(){ //为当前div设置定时器
var iSpeed = (iTarget-obj.offsetWidth)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //将当前的速度转化成整型值
//Math.ceil向上取整，Math.floor向下取整
if(obj.offsetWidth==iTarget){
clearInterval(obj.timer); //清除当前div的定时器
}else{
obj.style.width =obj.offsetWidth+iSpeed+‘px‘; //将div的宽以一定速度增加
}
},30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
当然这里的运动，运动形式还比较单一，只针对宽度或者高度，并没有实现多个形式的运动，这里将在下面在简单介绍一下
以上是关于多物体的运动，实现切换的主要内容，如果未能解决你的问题，请参考以下文章