如何使物体运动框架适配百分比单位？

运动框架的单位是px

贴上代码：

function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}
function startMove1(obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var bStop = true; //所有值都已经到达
        for (var attr in json) {
            //去当前值
            var iCur = 0;

            if (attr == 'opacity') {
                iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                iCur = parseInt(getStyle(obj, attr));
            }

            //算速度
            var iTarget = json[attr];
            var bodyWith = document.body.offsetWidth;
            var newTarget = 0;


            if (attr == 'marginLeft' || attr == 'width') {
                newTarget = Math.floor(bodyWith * iTarget / 100);
            } else {
                newTarget = iTarget;
            }

            var iSpeed = (newTarget - iCur) / 5;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            if (iCur != newTarget) {
                bStop = false;
            }

            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')'; //优先级
                obj.style.opacity = (iCur + iSpeed) / 100;
            } else {
                obj.style[attr] = iCur + iSpeed + 'px ';//终结果这里是px单位结尾
            }
        }

        if (bStop) {
            if(attr == 'marginLeft' || attr == 'width')
            {
                var numBefore = parseInt(getStyle(obj,attr));
                var numAfter =  Math.floor(numBefore/bodyWith*100);

                obj.style[attr] = numAfter + '%';//尝试转化但不能动态获值或赋值
            }
            else
            { 
                clearInterval(obj.timer);
            }
            if (fn) {
                fn();
            }
        }
    }, 30)
}

突出的主要问题：

• 返回的是固定的值，触发函数以后放缩页面就会影响原来布局
• 无法动态获取可视窗口的宽，不刷新就不能归位
• 要完成鼠标onmouseover、onmouseout事件，任意缩放ZOOM都不会改变动态效果。

你好,试一下我修改后的代码

function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

function startMove1(obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var bStop = true; //所有值都已经到达
        for (var attr in json) {
            //去当前值
            var iCur = 0;
            var unit = '';

            if (attr == 'opacity') {
                iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                var curStyle = getStyle(obj, attr);
                iCur = parseInt(curStyle);
                unit = curStyle.match(/[a-z]+$/i); // 获取属性的单位
                unit = unit ? unit[0] : 'px'; // 如果没有单位，则默认为px
            }

            //算速度
            var iTarget = json[attr];
            var bodyWith = document.body.offsetWidth;
            var newTarget = 0;

            if (unit === '%') {
                newTarget = Math.floor(bodyWith * iTarget / 100);
            } else {
                newTarget = iTarget;
            }

            var iSpeed = (newTarget - iCur) / 5;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            if (iCur != newTarget) {
                bStop = false;
            }

            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')'; //优先级
                obj.style.opacity = (iCur + iSpeed) / 100;
            } else {
                obj.style[attr] = iCur + iSpeed + unit;
            }
        }

        if (bStop) {
            for (var attr in json) {
                if (attr == 'marginLeft' || attr == 'width') {
                    var numBefore = parseInt(getStyle(obj, attr));
                    var numAfter = Math.floor(numBefore / bodyWith * 100);
                    obj.style[attr] = numAfter + '%';
                }
            }
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }
    }, 30);
}