js动画学习（四）

七、多属性封装函数   

 

      前面分别介绍了单独改变单一属性值得动画，从本节起开始介绍多属性封装函数，一个函数搞定多种属性值的改变。

      首先介绍一个很重要的函数getStyle(),这个函数返回一个元素的当前属性值。两个形参分别是元素和属性。注意浏览器的兼容性问题。

1 //获得元素样式专用封装函数，返回该属性的当前值
2 function getStyle(obj,attr) { 3     if (obj.currentStyle) {//IE浏览器
4         return obj.currentStyle[attr]; 5     } else { 6         return getComputedStyle(obj,false)[attr];//火狐浏览器
7  } 8 }

      接下来重点来了，一个函数实现改变多种属性的动画：

//多物体改变样式(宽，高，字体大小，边框等，透明度需单独分析）速度缓冲封装函数
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来验证一下：

1 <style type="text/css"> 2  #div1,#div2{
3  width: 200px;
4  height: 200px;
5  background: red;
6  border: 1px solid black;
7  margin-bottom: 10px;
8     }
9 </style>

 1 <div id="div1"></div>
 2 <div id="div2"></div>
 3 <script type="text/javascript">
 4 window.onload=function(){  5     var ob1=document.getElementById('div1');  6     var ob2=document.getElementById('div2');  7  ob1.onmouseover=function(){  8  startMove(this,'width',400);  9  } 10  ob1.onmouseout=function(){ 11  startMove(this,'width',200); 12  } 13     
14  ob2.onmouseover=function(){ 15  startMove(this,'opacity',31); 16  } 17  ob2.onmouseout=function(){ 18  startMove(this,'opacity',100); 19  } 20     //alert(parseFloat(0.07*100));弹出7.00000000001而不是7 所以上面程序中的parseFloat前加四舍五入Math.round函数
21 } 22 </script>

      这样就实现了通过一个startMove()函数实现改变物体的宽和透明度了。

 

八、链式运动

 

        上面讲的都是一个事件激发一个运动，本节介绍一个div的宽、高、透明度的链式运动。在上面的startMove函数基础上加一个形参fn，作为回调函数；在程序内部的检测运动是否停止部分加一个判断：if(fn) fn();在代码18行：

 

 1 //多物体改变样式(宽，高，字体大小，边框等，透明度单独分析）速度缓冲封装函数
 2 function startMove(obj,attr,target,fn) {//元素，改变的样式属性，达到的目标值，回调函数
 3  clearInterval(obj.timer);  4     obj.timer=setInterval(function(){  5         //1.取当前值
 6         var icur=0;//icur返回物体样式属性值的大小
 7         if (attr=='opacity') {//如果属性是透明度，透明度的返回值是零点几的小数
 8             icur=Math.round(parseFloat(getStyle(obj,attr))*100);//round函数避免透明度值在小数之间来回跳动
 9         } else { 10             icur=parseInt(getStyle(obj,attr)); 11  } 12         //2.算速度
13         var speed=(target-icur)/8;//分母为比例系数K，可调
14         speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度要取整，不然移动不到终点就停止
15         //3.检测运动是否停止
16         if (icur==target) { 17  clearInterval(obj.timer); 18             if(fn){//上一个运动停止后判断一下是否还有下一个运动，如果有的话就执行回调函数
19  fn(); 20  } 21         } else { 22             if (attr=='opacity') { 23                 obj.style.filter='alpha(opacity:'+(icur+speed)+')';//IE浏览器
24                 obj.style.opacity=(icur+speed)/100;//火狐浏览器
25             } else { 26                 obj.style[attr]=icur+speed+'px'; 27  } 28  } 29     },30) 30 }

       下面是个简单的div

 1 <style type="text/css">
 2  #div1{
 3  width: 200px;
 4  height: 200px;
 5  background: red;
 6  border: 2px solid black;
 7  filter: alpha(opacity:30);
 8  opacity: 0.3;
 9     }
10 </style>

      注意看js部分的函数嵌套：

 1 <div id="div1"></div>
 2 <script type="text/javascript">
 3 window.onload=function(){  4     var ob1=document.getElementById('div1');  5  ob1.onmouseover=function(){  6  startMove(ob1,'width',400,function(){  7  startMove(ob1,'height',400,function(){  8  startMove(ob1,'opacity',100);  9  }) 10  }); 11  } 12  ob1.onmouseout=function(){ 13  startMove(ob1,'opacity',30,function(){ 14  startMove(ob1,'height',200,function(){ 15  startMove(ob1,'width',200); 16  }) 17  }); 18  } 19 }

      鼠标离开的变化顺序与鼠标经过时的相反。