本文，是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的，在这篇文章的最后，我们做了2个小实例：侧边栏与改变透明度的淡入淡出效果，本文我们把上文的animate函数，继续改造，让他变得更加的通用和强大：
1，支持多个物体的运动
2，同时运动
3，顺序运动
这三种运动方式也是jquery中animate函数支持的
一、animate函数中怎么区分变化不同的样式？
上文中，侧边栏效果 用的animate函数 改变的是left值
1 function animate(obj, target, speed) { 2 clearInterval(timer); 3 timer = setInterval(function () { 4 if (obj.offsetLeft == target) { 5 clearInterval(timer); 6 } else { 7 obj.style.left = obj.offsetLeft + speed + 'px'; 8 } 9 }, 30); 10 }
淡入淡出效果 用的animate函数 改变的是透明度
1 function animate(obj, target, speed) { 2 clearInterval(timer); 3 var cur = 0; 4 timer = setInterval(function () { 5 cur = css( obj, 'opacity') * 100; 6 if( cur == target ){ 7 clearInterval( timer ); 8 }else { 9 cur += speed; 10 obj.style.opacity = cur / 100; 11 obj.style.filter = "alpha(opacity:" + cur + ")"; 12 } 13 }, 30); 14 }
而我们封装的函数，要变成通用的，首先面临的问题就是 这个函数要同时支持left值和透明度的变化，更通用的做法应该是要支持所有的样式变化，比如轮播功能，他有左右滑动，也有上下滑动。
我们可以在获取样式和改变样式的时候，做一下判断就可以了，判断分2类就能达到目的，因为其他样式( margin, left, top, right, font-size等等 )都是px，而透明度没有px单位
1 function animate(obj, attr, target, speed) { 2 clearInterval(timer); 3 var cur = 0; 4 timer = setInterval(function () { 5 if (attr == 'opacity') { 6 cur = css(obj, 'opacity') * 100; 7 } else { 8 cur = parseInt(css(obj, attr)); 9 } 10 11 if (cur == target) { 12 clearInterval(timer); 13 } else { 14 if (attr == 'opacity') { 15 obj.style.opacity = ( cur + speed ) / 100; 16 obj.style.filter = "alpha(opacity:" + (cur + speed) + ")"; 17 } else { 18 obj.style[attr] = cur + speed + "px"; 19 } 20 } 21 }, 30); 22 }
合并之后的animate相比之前多了一个参数attr, 这个参数就是变化的样式，obj: 变化的对象， target: 样式需要变化到的目标值. speed: 样式每次变化的大小
如：
oImg.onmouseover = function () {
animate(this, 'opacity', 100, 10);
}
oImg是获取到的图片对象. 这里各参数意思如下：
this：当前图片对象
opacity: 变化的样式是透明度
100: 鼠标移到图片上时，透明度变成100
10: 透明度每次在原来的基础上加10
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>合并的运动 - by ghostwu</title> 6 <style> 7 img { 8 border: none; 9 opacity: 0.3; 10 filter: alpha(opacity:30); 11 position: absolute; 12 left: 200px; 13 } 14 15 #box { 16 width: 150px; 17 height: 300px; 18 background: red; 19 position: absolute; 20 left: -150px; 21 top: 50px; 22 } 23 24 #box div { 25 width: 28px; 26 height: 100px; 27 position: absolute; 28 right: -28px; 29 top: 100px; 30 background: green; 31 } 32 </style> 33 <script> 34 window.onload = function () { 35 var oImg = document.getElementById("img"), 36 oBox = document.getElementById("box"), 37 timer = null; 38 39 oImg.onmouseover = function () { 40 animate(this, 'opacity', 100, 10); 41 } 42 oImg.onmouseout = function () { 43 animate(this, 'opacity', 30, -10); 44 } 45 46 oBox.onmouseover = function () { 47 animate(this, 'left', 0, 10); 48 } 49 50 oBox.onmouseout = function () { 51 animate(this, 'left', -150, -10); 52 } 53 54 function animate(obj, attr, target, speed) { 55 clearInterval(timer); 56 var cur = 0; 57 timer = setInterval(function () { 58 if (attr == 'opacity') { 59 cur = css(obj, 'opacity') * 100; 60 } else { 61 cur = parseInt(css(obj, attr)); 62 } 63 64 if (cur == target) { 65 clearInterval(timer); 66 } else { 67 if (attr == 'opacity') { 68 obj.style.opacity = ( cur + speed ) / 100; 69 obj.style.filter = "alpha(opacity:" + (cur + speed) + ")"; 70 } else { 71 obj.style[attr] = cur + speed + "px"; 72 } 73 } 74 }, 30); 75 } 76 77 function css(obj, attr) { 78 if (obj.currentStyle) { 79 return obj.currentStyle[attr]; 80 } else { 81 return getComputedStyle(obj, false)[attr]; 82 } 83 } 84 } 85 </script> 86 </head> 87 <body> 88 <div > 89 <div>分享到</div> 90 </div> 91 <img src="./img/h4.jpg" alt="" /> 92 </body> 93 </html>
上述就是完整的代码实例，请自行展开，点击run code预览效果