关于js一些简单的动画工具类

function move(obj, attr, target, speed, callback) {
    //obj需要移动的元素
    //attr元素要执行动画的样式(left,top,width,height)(加""应为要穿字符串)
    //target元素obj移动结束的位置(不需要px)
    //speed移动的速度和方向
    //callback回调函数,将会在动画执行完毕后执行


    //关闭上一个定时器，避免定时器叠加
    clearInterval(obj.timer);
    //获取元素目前的位置
    var current = parseInt(getStyle(obj, attr)); //获取的值为number
    //判断speed的正负
    if (current > target) {
        speed = -speed;
    }
    //定时器
    //向obj元素中添加一个timer的属性用来保存定时器的唯一标识
    obj.timer = setInterval(function() {

        var oldValue = parseInt(getStyle(obj, attr)); //获取number值
        var newValue = oldValue + speed;

        //向左移动时，speed为负数，newValue<target
        //向右移动时，speed为正数，newValue>target
        if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
            newValue = target;
        }
        obj.style[attr] = newValue + "px";
        //当元素移动到800像素时，停止移动
        if (newValue == target) {
            clearInterval(obj.timer);
            //判断是否使用回调函数，防止报错
            callback && callback();
        }
    }, 1)
}

function getStyle(obj, name) { //obj元素名，name获取的样式||根据元素名获取元素当前的样式
    if (window.getComputedStyle) {
        return getComputedStyle(obj, null)[name];

    } else {
        return obj.currentStyle[name];
    }
}

//增加一个class
function addClass(obj, cn) {
    if (!hasClass(obj, cn)) {
        obj.className += " " + cn;
    }
}

//判断一个元素有没有指定的class属性值
function hasClass(obj, cn) {
    //判断obj中有没有cn的class
    //有返回true，无返回false
    //利用正则表达式来判断obj样式里是否有cn
    //利用构造函数方法
    var reg = new RegExp("\\b" + cn + "\\b");
    return reg.test(obj.className);
}

//删除一个元素中的class属性
function removeClass(obj, cn) {
    //创建一个正则表达式
    var reg = new RegExp("\\b" + cn + "\\b");
    //删除class
    obj.className = obj.className.replace(reg, "");
}

//替换一个元素中的class，有就删除，没有就加上
function toggleClass(obj, cn) {
    if (hasClass(obj, cn)) {
        removeClass(obj, cn);
    } else {
        addClass(obj, cn);
    }
}

//用来切换菜单的折叠和显示的状态(竖向)
function toggleMenu(obj, speed) {
    var begin = obj.offsetHeight;
    //关闭parentDiv
    toggleClass(obj, "close");
    var end = obj.offsetHeight;
    obj.style.height = begin + "px";
    move(obj, "height", end, speed, function() {
        obj.style.height = "";
    });
}

//拖拽事件
function drag(obj) {
    obj.onmousedown = function(event) {
        // alert("点");
        obj.setCapture && obj.setCapture();//获取页面焦点
        event = event || window.event;//兼容IE
        var x = event.clientX - obj.offsetLeft;//获取鼠标焦点到浏览器左面的距离
        var y = event.clientY - obj.offsetTop;//获取鼠标焦点到浏览器上面的距离

        document.onmousemove = function(event) {
            event = event || window.event;
            var left = event.clientX;
            var top = event.clientY;
            obj.style.left = left - x + "px";
            obj.style.top = top - y + "px";
        }
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
            obj.releaseCapture && obj.releaseCapture();

        }
        return false;
    }
}