• 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];
            }
        }
  • 相关阅读:
    PHP页面静态化
    PHP实现单文件、多文件上传 封装 面向对象实现文件上传
    PHP MYSQL
    MySQL 数据表
    MySQL基础
    DOM事件处理程序-事件对象-键盘事件
    JS--显示类型转换Number—隐式类型转换
    JS的数据类型
    JS属性读写操作+if判断注意事项
    Javascript进阶篇——总结--DOM案例+选项卡效果
  • 原文地址:https://www.cnblogs.com/lsy0403/p/5882786.html
Copyright © 2020-2023  润新知