标签：
前面分别介绍了单独改变单一属性值得动画，从本节起开始介绍多属性封装函数，一个函数搞定多种属性值的改变。
首先介绍一个很重要的函数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()函数实现改变物体的宽和透明度了。
标签：
原文地址：http://www.cnblogs.com/csxiaoyu/p/5203797.html
