缓存动画3—传json

 var obj = {
        "left": 300,
        "top": 400,
        "width": 600,
        "height": 600
    };

    for(var key in obj){
        console.log(key);
        console.log(obj[key]);
    }

遍历json

<script>
        window.addEventListener('load', function (ev) {
            var box = myTool.$('box');

            myTool.$('btn').addEventListener('click', function () {
                buffer(box, { 'left': 300, 'top': 500, 'width': 600, 'height': 400});
            });

            myTool.$('btn1').addEventListener('click', function () {
                buffer(box, 'width', 800);
            });
        });

        /**
         *  缓动动画函数
         * @param {Object}eleObj
         * @param {Object}json
         */
        function buffer(eleObj, json) {
            // 1.1 先清后设
            clearInterval(eleObj.timer);

            // 1.2 定义变量
            var speed = 0, begin = 0, target = 0;

            // 1.2 设置定时器
            eleObj.timer = setInterval(function () {
               for(var key in json){
                   // 获取要做动画属性的初始值
                   begin = parseInt(myTool.getStyleAttr(eleObj, key)) || 0;
                   target = parseInt(json[key]);
                   console.log('begin:' + begin);

                   // 2.3 求出步长
                   speed = (target - begin) * 0.2;
                   speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);

                   // 2.4  动起来
                   eleObj.style[key] = begin + speed + 'px';

                   // 2.5 清除定时器
                   if (begin === target) {
                       clearInterval(eleObj.timer);
                   }
               }
            }, 20);
        }
    </script>