javascript动画函数封装（升级版）

//把 任意对象 的 任意数值属性 改变为 任意的目标值function animate(obj, json, fn) {clearInterval(obj.timer);obj.timer = setInterval(function () {var flag = true;for (var k in json) {if (k === "opacity") {//opacity要特殊处理//opacity没有单位 参与运算自动转换成数值 所以不用parsetInt//取值范围 0-1 0.1 0.33 33 为了让以前的计算公式生效 要扩大100倍var leader = getStyle(obj, k) * 100;var target = json[k] * 100;var step = (target - leader) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);leader = leader + step;obj.style[k] = leader / 100;//opacity没有单位} else if (k === "zIndex") {obj.style.zIndex = json[k];//层级不需要渐变 直接设置即可} else {var leader = parseInt(getStyle(obj, k)) || 0;var target = json[k];var step = (target - leader) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);leader = leader + step;obj.style[k] = leader + "px";}if (leader != target) {flag = false;}}if (flag) {clearInterval(obj.timer);if (fn) {fn();}}}, 15);}//全部属性都到达目标值才能清空function getStyle(obj, attr) {if (window.getComputedStyle) {return window.getComputedStyle(obj, null)[attr];} else {return obj.currentStyle[attr];}}

 

转载于:https://www.cnblogs.com/lsy0403/p/5882786.html

总结

以上是生活随笔为你收集整理的javascript动画函数封装（升级版）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。