js 缓动框架封装

来源：互联网发布：cms html5模板编辑：程序博客网时间：2024/06/05 21:17
/** * 能够将 任意对象的任意属性改变到任意值(添加了回调函数，在执行完整个动画之后会执行回调函数)添加了透明度和层级 * @param obj * @param json * @param fn */function animate(obj, json, fn) {    clearInterval(obj.timer);    obj.timer = setInterval(function () {        var flag = true;        for (var k in json) {            if (k === "opacity") {                //opacity 是小数                var leader = getStyle(obj, k) * 100;//opacity不需要也不能给默认值                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);}/** * 获取经过计算后对象的属性，不管行内还是外联都可以获取到 * @param obj * @param attr * @returns {*} */function getStyle(obj,attr){    if(window.getComputedStyle){        return window.getComputedStyle(obj)[attr];    }else{        return obj.currentStyle[attr];    }}
0 0