封装缓动(变速)动画---增加任意一个属性
1. 本来的变速动画函数，是获取特定的属性(之前案例是向右移动，所以获取的是left属性)
2. 现在改变为，获取任意一个属性，使其移动到指定的target，相当于在原animate(element,target)函数上，增加了一个属性，变为animate(element, attr, target)函数
3. 改动一：在获取当前元素的位置，var current，用getStyle来获取，因为得到的是字符串类型，包一个parseInt改为数字类型；
4. 改动二：移动步数时候，元素的当前位置等于current+"px"，element.style.left更新为element.style[attr], 特定的元素用任意元素取代
获得的效果：就是可以使任意元素的，任意一个样式属性，移动到指定的目标位置
attr位置，可以改为left，可以改为heigth, 可以改为top，可以改为bgc....等等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } div { margin-top: 20px; width: 200px; height: 100px; background-color: green; position: absolute; left: 0; top: 0; } </style> </head> <body> <input type="button" value="移动到400px" id="btn1" /> <input type="button" value="移动到800px" id="btn2" /> <div id="dv"> <script src="common.js"></script> <script> //点击按钮移动div my$("btn1").onclick = function () { //获取div此时left的当前位置,达到目标400 // animate(my$("dv"),"left",400); //获取div此时的宽度,达到目标200 animate(my$("dv"), "width", 200); }; //获取任意的一个属性的当前的属性值: 改用之前封装的getStyle函数 function getStyle(element, attr) { //判断浏览器是否支持这个方法 return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr]; } //匀速动画 //element---元素 //attr---属性名字 //target---目标位置 function animate(element, attr, target) { //清理定时器 clearInterval(element.timeId); element.timeId = setInterval(function () { //获取元素的当前位置 var current = parseInt(getStyle(element, attr));//数字类型//=============================== //移动的步数 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step; element.style[attr] = current + "px";//============================================ if (current == target) { //清理定时器 clearInterval(element.timeId); } //测试代码: console.log("目标位置:" + target + ",当前位置:" + current + ",每次移动步数:" + step); }, 20); } </script> </div> </body> </html>