10-19move函数完全整合，一次改变多个样式，回调函数

一、先导入封装好的获取对象非行内样式的函数：

function getCss(obj,val){//封装兼容性获取CSS样式属性,obj为获取的对象，val为要获取的样式名
if(obj.currentStyle){
return obj.currentStyle[val];
}else{
return getComputedStyle(obj,true)[val];
}
}//函数得到的值是字符串

二、整合函数，可直接调用：

function move(obj,json,refn){//refn为回调函数值，可选
var speed=0;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var isStop=true;//boolean值 拿来判断定时器何时关闭
for(var attr in json){//遍历传入的对象
if(parseFloat(getCss(obj,attr))!==json[attr]){//如果obj的attr值不等于要到达的终点值，定时器继续
isStop=false;
}
if(attr=='opacity'){//如果想要改变的样式是透明度
var op = parseFloat(getCss(obj,attr))*100;
//用getCss方法获取对象原本的name样式,这里是opacity
speed=(json[attr]-op)/10;
//用speed变量来控制透明度改变的速度，目标值减对象的透明值
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//对speed取整，若speed值大于0，让speed向上取整，否则向下取整
//关于取整 例23.3 math.ceil（23.3）=24，math.floor(23.3)=23,math.round是四舍五入
op += speed;//op为每次设置的透明度值
obj.style.opacity=op/100;
obj.style.filter='alpha(opacity='+op+')';//兼容IE
//兼容非ie
}else{ //改变非透明度属性
speed=(json[attr]-parseFloat(getCss(obj,attr)))/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
obj.style[attr]=parseFloat(getCss(obj,attr))+speed+'px';
}
}
if(isStop){//如果isStop值为true，证明所有值都达到了终点值
clearInterval(obj.timer);//关闭定时器
if(refn){//如果存在回调函数，则执行
refn();
}
}
},30);//每三十毫秒改变属性一次，实现有动态效果
}

三、调用函数

var box = document.getElementById('box');

box.οnmοuseοver=function(){ //鼠标移上盒子，改变盒子的宽度为400px，高度为800px，透明度设为1
move(box,{width:400,height:800,opacity:100});
}

box.οnmοuseοut=function(){

move(box,{width:200,height:200,opacity:200},function(){//带有回调函数，先将盒子宽度设为200px,高度设为200px,

透明度设为0.2,执行完后再执行回调函数，让盒子向右移动100px

move(box,{left:100});

})；

}