Js之完美运动框架(包括scrollTop)_运动框架包含-CSDN博客

本文链接：https://blog.csdn.net/qq_42357854/article/details/106783058

本文介绍了如何使用JavaScript创建一个功能完善的运动框架，特别讨论了如何处理scrollTop的动画效果，为网页滚动提供平滑的用户体验。

摘要由CSDN通过智能技术生成

Js之完美运动框架(包括scrollTop)

//多物体运动 链式/同时运动

    function namex(obj, json, fn) {
        clearInterval(obj.time);
       
        obj.time = setInterval(function () {
            var cur = 0,speed =0;
            flag = true;
            for (var attr in json) {
                switch (attr) {
                    case "opacity":
                        cur = Math.round(parseFloat(getAttribute(obj,attr)) * 100)
                        break;
                    case "scrollTop":
                        cur = obj[attr];
                        break;
                    default:
                         cur =  parseInt(getAttribute(obj, attr));
                        break;
                }
               speed = (json[attr] - cur) /20;
               speed = json[attr] > cur ? Math.ceil(speed) : Math.floor(speed);
                if (json[attr]!== cur) {
                    flag = false;

                }
                switch (attr) {
                    case "opacity":
                        obj.style[attr]=(cur+speed)/100;
                        obj.style[attr]=`alpha(opacity:${cur+speed})`
                        break;
                    case "scrollTop":
                        obj.srcollTop=cur+speed; 
                    default:
                        obj.style[attr]=cur+speed+"px";
                        break;
                }
              
                
               
            }
            if (flag) {
                clearInterval(obj.time);

                if (fn) {
                    fn();
                }
                return;
            }

            //当前值

        }, 20)

     


    }
    function getAttribute(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr]
        } else {
            return getComputedStyle(obj, null)[attr]
        }
    }
    //offsetwidth offsetHeight 获取的是可视面积盒子===content+padding+border
    //offsetLeft offsetTop  获取的是距离定位元素的左侧距离和顶部距离 (margin也算)
    //clientWidth  clientHeight  获取的是元素的宽度和高度 ===padding盒子
    //clientLeft clientTop  获取的是左边框和上边框==border
    //scrollWidth scrollHeight 获取的是 滚动盒子距离就是padding盒子+滚动的距离
    //scrollLeft scrollTop 获取的是 滚动了多少距离 非px
    //获取屏幕
    //clientX:获取距离body可视界面的距离X
    //offsetX:获取距离定位元素可的距离X
    //pageX:获取滚动距离的X