js运动

目录

• 缓冲运动
• 弹性运动

缓冲运动

   function startMove(ele, attrs, callBack) {
            var curr = 0,
                speed = null;
            ele.timer = setInterval(function () {
                var stop = true; //如果有某一个不满足条件,则为false。
                for (var attr in attrs) {

                    if (attr === 'opacity')
                        curr = parseFloat(getStyle(ele, 'opacity')) * 100; //如果为背景色,将值扩大100倍,在赋值的时候将值转换回去
                    else
                        curr = parseInt(getStyle(ele, attr));

                    speed = (attrs[attr] - curr) / 7 //由快到慢
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    if (attr === 'opacity')
                        ele.style.opacity = (curr + speed) / 100;
                    else
                        ele.style[attr] = curr + speed + 'px';

                    if (curr !== attrs[attr])
                        stop = false;
                }

                if (stop) {
                    clearInterval(ele.timer);
                    typeof callBack == 'function' && callBack();
                }
            }, 30)
        }

        //获取元素某个样式
        function getStyle(ele, attr) {
            if (window.getComputedStyle) return getComputedStyle(ele, null)[attr];
            return ele.currentStyle[attr];
        }

弹性运动

 function startMove(ele, target) {
            clearInterval(timer);
            var speed = 0,
                a = 3, //每次移动的像素
                u = 0.8;
            timer = setInterval(function () {
                a = (target - ele.offsetLeft) / 7;
                speed += a;
                speed *= u;
                if (Math.abs(speed) < 1 && Math.abs(target - ele.offsetLeft) < 1) {
                    clearInterval(timer);
                    ele.style.left = target + 'px'
                } else
                    ele.style.left = ele.offsetLeft + speed + 'px';
            }, 30)
        }