七、多属性封装函数
前面分别介绍了单独改变单一属性值得动画，从本节起开始介绍多属性封装函数，一个函数搞定多种属性值的改变。
首先介绍一个很重要的函数getstyle(),这个函数返回一个元素的当前属性值。两个形参分别是元素和属性。注意浏览器的兼容性问题。
//获得元素样式专用封装函数，返回该属性的当前值
function getstyle(obj,attr) {
if (obj.currentstyle) {//ie浏览器
return obj.currentstyle[attr];
} else {
return getcomputedstyle(obj,false)[attr];//火狐浏览器
}
}
接下来重点来了，一个函数实现改变多种属性的动画：
//多物体改变样式(宽，高，字体大小，边框等，透明度需单独分析）速度缓冲封装函数
function startmove(obj,attr,target) {//元素，改变的样式属性，达到的目标值
clearinterval(obj.timer);//首先清除定时器
obj.timer=setinterval(function(){
//1.取当前值
var icur=0;//icur返回物体样式属性值的大小
if (attr=='opacity') {//如果属性是透明度，透明度的返回值是零点几的小数
icur=math.round(parsefloat(getstyle(obj,attr))*100);//round函数避免透明度值在小数之间来回跳动
} else {
icur=parseint(getstyle(obj,attr));
}
//2.算速度
var speed=(target-icur)/8;//分母为比例系数k，可调
speed=speed>0?math.ceil(speed):math.floor(speed);//缓冲速度要取整，不然移动不到终点就停止
//3.检测运动是否停止
if (icur==target) {
clearinterval(obj.timer);
} else {
if (attr=='opacity') {
obj.style.filter='alpha(opacity:'+(icur+speed)+')';//ie浏览器
obj.style.opacity=(icur+speed)/100;//火狐浏览器
} else {
obj.style[attr]=icur+speed+'px';
}
}
},30)
}
我们通过两个div来验证一下：
<style type="text/css">
#div1,#div2{
width: 200px;
height: 200px;
background: red;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
window.onload=function(){
var ob1=document.getelementbyid('div1');
var ob2=document.getelementbyid('div2');
ob1.onmouseover=function(){
startmove(this,'width',400);
}
ob1.onmouseout=function(){
startmove(this,'width',200);
}
ob2.onmouseover=function(){
startmove(this,'opacity',31);
}
ob2.onmouseout=function(){
startmove(this,'opacity',100);
}
//alert(parsefloat(0.07*100));弹出7.00000000001而不是7 所以上面程序中的parsefloat前加四舍五入math.round函数
}
</script>
这样就实现了通过一个startmove()函数实现改变物体的宽和透明度了。
八、链式运动
上面讲的都是一个事件激发一个运动，本节介绍一个div的宽、高、透明度的链式运动。在上面的startmove函数基础上加一个形参fn，作为回调函数；在程序内部的检测运动是否停止部分加一个判断：if(fn) fn();在代码18行：
//多物体改变样式(宽，高，字体大小，边框等，透明度单独分析）速度缓冲封装函数
function startmove(obj,attr,target,fn) {//元素，改变的样式属性，达到的目标值，回调函数
clearinterval(obj.timer);
obj.timer=setinterval(function(){
//1.取当前值
var icur=0;//icur返回物体样式属性值的大小
if (attr=='opacity') {//如果属性是透明度，透明度的返回值是零点几的小数
icur=math.round(parsefloat(getstyle(obj,attr))*100);//round函数避免透明度值在小数之间来回跳动
} else {
icur=parseint(getstyle(obj,attr));
}
//2.算速度
var speed=(target-icur)/8;//分母为比例系数k，可调
speed=speed>0?math.ceil(speed):math.floor(speed);//缓冲速度要取整，不然移动不到终点就停止
//3.检测运动是否停止
if (icur==target) {
clearinterval(obj.timer);
if(fn){//上一个运动停止后判断一下是否还有下一个运动，如果有的话就执行回调函数
fn();
}
} else {
if (attr=='opacity') {
obj.style.filter='alpha(opacity:'+(icur+speed)+')';//ie浏览器
obj.style.opacity=(icur+speed)/100;//火狐浏览器
} else {
obj.style[attr]=icur+speed+'px';
}
}
},30)
}
下面是个简单的div
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background: red;
border: 2px solid black;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
注意看js部分的函数嵌套：
<div id="div1"></div>
<script type="text/javascript">
window.onload=function(){
var ob1=document.getelementbyid('div1');
ob1.onmouseover=function(){
startmove(ob1,'width',400,function(){
startmove(ob1,'height',400,function(){
startmove(ob1,'opacity',100);
})
});
}
ob1.onmouseout=function(){
startmove(ob1,'opacity',30,function(){
startmove(ob1,'height',200,function(){
startmove(ob1,'width',200);
})
});
}
}
鼠标离开的变化顺序与鼠标经过时的相反。
以上就是js动画学习（四）的内容。