tool.js

1.封装兼容性的 addEvent(elem, type, handle);方法

function addEvent(elem, type, handle) {
    if(elem.addEventListener) {
        elem.addEventListener(type, handle, false);
    }else if(elem.attachEvent) {
        elem.attachEvent('on' + type, function () {
            handle.call(elem);
        })
    }else{
        elem['on' + type] = handle;
    }
}

2.封装取消冒泡的函数 stopBubble(event)

function stopBubble(event) {
    if(event.stopPropagation) {
        event.stopPropagation();
    }else{
        event.cancelBubble = true;
    }
}

3.封装阻止默认事件的函数 cancelHandler(event);

function cancelHander(event) {
    if(e.preventDefault) {
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}

获取样式getStyle

function getStyle(obj, attr) {
    if(obj.currentStyle) {
        return obj.currentStyle[attr];
    }else{
        return window.getComputedStyle(obj, false)[attr];
    }
}

多物体、多值、链式调用框架

这里写链接内容

//getStyle是获取元素属性的函数
function getStyle(obj, attr) {
   if(obj.currentStyle) {
       return obj.currentStyle[attr];
   }else{
       return window.getComputedStyle(obj, false)[attr];
   }
}

//obj ;要改变样式的元素
//json ;要改变的值； 对象形式
//callback ;链式调用函数
function startMove(obj, json, callback) {
    clearInterval(obj.timer);
    var iSpeed,
        iCur;
    obj.timer = setInterval(function () {
        var bStop = true;
        for(var attr in json) {
            if(attr == 'opacity') {
                iCur = parseFloat(getStyle(obj, attr)) * 100;
            }else {
                iCur = parseFloat(getStyle(obj, attr));
            }
            iSpeed = (json[attr] - iCur) / 7;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            if(attr == 'opacity') {
                obj.style.opacity = (iCur + iSpeed) / 100;
            }else {
                obj.style[attr] = iCur + iSpeed + 'px';
            }
            if(iCur != json[attr]) {
                bStop = false;
            }
            if(bStop) {
                clearInterval(obj.timer);
                typeof callback == 'function' ? callback() : ''; //判断参数是否是函数，是就执行（链式调用）；
            }
        }
    }, 30)
}