首页 > 代码库 > 多物体多种样式的运动简略分析
多物体多种样式的运动简略分析
上面忘了介绍多物体的多种样式的运动，比如让一个物体宽度，另外一个的高度或者透明度发生改变，这样用单个运动框架就不能实现，我们在函数体类再传入一个参数，指定需要改变的样式，这样基本能实现功能需要，下面还是通过一个小例子来简要说明一下：
<!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; font-size: 14px;}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName(‘div‘);
var i=0;
oDiv[0].onclick = function() //单独设置每个div的点击样式，这样更直观的展示效果
{
setMove(this,‘width‘,300); //这里的样式都不相同，但现在都可以通过一个框架来实现
}
oDiv[1].onclick = function()
{
setMove(this,‘height‘,200);
}
oDiv[2].onclick = function()
{
setMove(this,‘font-size‘,100);
}
};
//获取div的宽度，代替offsetWidth,这样边框就不会有影响
function getStyle(obj,arr){ //两个参数，第一个是获取谁的，第二个时什么样式
if(obj.currentStyle){
return obj.currentStyle[arr];
}else{
return getComputedStyle(obj,false)[arr]; //里面有两个参数，第一个是获取谁的，第二个参数不为空就行，后面是获取样式
}
}
function setMove(obj,arr,iTarget){ //设置多个参数,第二个参数为要改变的样式,第三个为要设定的目标值
var timer = null;
clearInterval(obj.timer); //关闭已有的定时器
obj.timer = setInterval(function(){ //为当前div设置定时器
var iCurr = parseInt(getStyle(obj,arr)); //这里就是获取的当前div的样式值
var iSpeed = (iTarget-iCurr)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //将当前的速度转化成整型值
//Math.ceil向上取整，Math.floor向下取整
if(iCurr==iTarget){
clearInterval(obj.timer); //如果已达到目标值，则清除当前div的定时器
}else{
obj.style[arr]= iCurr+iSpeed+‘px‘; //将div的样式以一定速度变化
}
},30); //每30毫秒就变化一次
}
</script>
</head>
<body>
<div></div>
<div></div>
<div>asdf</div>
</body>
</html>
这个小例子就可以实现多个物体通过一个框架来实现不同的运动形式，通过添加要变化的样式这个参数来实现不同的形式。到这儿，我们就可以封装一个运动的框架，
function setMove(obj,arr,iTarget){ //设置多个参数,第二个参数为要改变的样式,第三个为要设定的目标值
var timer = null;
clearInterval(obj.timer); //关闭已有的定时器
obj.timer = setInterval(function(){ //为当前div设置定时器
var iCurr = parseInt(getStyle(obj,arr)); //这里就是获取的当前div的样式值
var iSpeed = (iTarget-iCurr)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //将当前的速度转化成整型值
//Math.ceil向上取整，Math.floor向下取整
if(iCurr==iTarget){
clearInterval(obj.timer); //如果已达到目标值，则清除当前div的定时器
}else{
obj.style[arr]= iCurr+iSpeed+‘px‘; //将div的样式以一定速度变化
}
},30); //每30毫秒就变化一次
}
上面这个函数，我们就可以单独封装起来，以后就可以引入就行，节省了资源。当然，后面会介绍连续运动的框架。
多物体多种样式的运动简略分析