琴& 2019-01-20 21:06 采纳率: 50%
浏览 223
已采纳

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

运动框架的单位是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都不会改变动态效果。
  • 写回答

1条回答 默认 最新

  • QDKuz 2023-09-04 09:55
    关注

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

    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);
    }
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已采纳回答 9月4日

悬赏问题

  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常