JS---封装缓动(变速)动画函数---增加任意多个属性&增加回调函数
程序员文章站
2022-05-29 08:25:30
封装缓动(变速)动画函数 增加任意多个属性&增加回调函数 回掉函数fn,在所有元素到达目的位置后,判断是否传入一个函数,有就调用 if(fn){fn()}; 这样一次点击,产生多个动画
封装缓动(变速)动画函数---增加任意多个属性&增加回调函数
回掉函数fn,在所有元素到达目的位置后,判断是否传入一个函数,有就调用 if(fn){fn()};
这样一次点击,产生多个动画
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> * { margin: 0; padding: 0; } div { margin-top: 30px; width: 200px; height: 100px; background-color: green; position: absolute; left: 0; top: 0; } </style> </head> <body> <input type="button" value="移动到400px" id="btn1" /> <div id="dv"> </div> <script src="common.js"></script> <script> //点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getstyle(element, attr) { return window.getcomputedstyle ? window.getcomputedstyle(element, null)[attr] : element.currentstyle[attr] || 0; } //element---元素 //json---对象---多个属性及多个目标值 //fn---函数 function animate(element, json, fn) { clearinterval(element.timeid); element.timeid = setinterval(function () { var flag = true; for (var attr in json) { var current = parseint(getstyle(element, attr)); var target = json[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) { flag = false; } } if (flag) { clearinterval(element.timeid); if (fn) { fn(); } } //测试代码 console.log("目标:" + target + ",当前:" + current + ",每次移动的步数" + step); }, 20) } my$("btn1").onclick = function () { var json1 = { "width": 400, "height": 200, "left": 500, "top": 80 }; animate(my$("dv"), json1, function () { var json2 = { "width": 200, "height": 100, "left": 200, "top": 120 }; animate(my$("dv"), json2, function () { var json3 = { "width": 400, "height": 300, "left": 300, "top": 80 }; animate(my$("dv"), json3); }); }); }; </script> </body> </html>
上一篇: 1.简单输入输出