tools.js

//1.简单动画
/*尝试构造一个可以执行简单动画的函数
 * -参数：
 *     obj:要执行动画的对象
 *     attr:要执行动画的样式，如left top width height
 *     target:执行动画的目标位置
 *     speed:移动的速度（正数右移，负数左移）
 *     callback:回调函数，这个函数会在动画执行完毕以后执行
 */
//move(imgList,"left",-320*index,20,function(){
//                
//            });
function move(obj, attr, target, speed, callback) {
    //关闭上一个定时器，防止加速
    clearInterval(obj.timer);
    //获取元素目前的位置
    var current = parseInt(getStyle(obj, attr));
    //判断速度的正负
    //如果从0到800移动，则speed为正,800到0移动，为负
    if(current > target) {
        //此时speed为负
        speed = -speed;
    }

    //-开启一个定时器，来执行动画效果
    obj.timer = setInterval(function() {
        //获取目标原来的left值
        var oldValue = parseInt(getStyle(obj, attr));
        //在旧值的基础上增加
        var newValue = oldValue + speed;

        if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
            newValue = target;
        }

        //将新值设置给目标
        obj.style[attr] = newValue + "px";

        if(newValue == target) {
            //到达目标值，关闭定时器
            clearInterval(obj.timer);
            //动画执行完毕，调用回调函数
            callback && callback();
        }
    }, 30);
}


//2.class的操作
/*定义一个元素，来获取指定元素的当前的样式
 * -参数：
 *     obj:要获取样式的元素
 *     name:要获取的样式名
 */
//getStyle(box, "d2");
function getStyle(obj, name) {
    return getComputedStyle(obj, null)[name];
}

/*定一个函数来用来想一个元素中动态添加指定的class属性值
         * -参数：
         *         obj 目标元素
         *         cn 要添加的class值
         */
        function addClass(obj,cn){
            //判断，防止cn有了还执行函数多次添加
            if(!hasClass(obj,cn)){
                obj.className += " "+cn;
            }
            
        }
        /*判断一个元素中是否含有指定的class属性值
         * 如果有，返回true
         */
        function hasClass(obj,cn){
            //判断obj中有没有cn class，正则表达式
            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
         * 如果元素中有该class，则删除；没有，则添加
         */
        function toggleClass(obj,cn){
            if(hasClass(obj,cn)){
                removeClass(obj,cn);
            }else{
                addClass(obj,cn);
            }
        }