10.16.JS-封装方法

返回滚动轮滚动距离getScrollOffset()

function getScrollOffset() {
  if (window.pageXOffset) {
    return {
      x: window.pageXOffset,
      y: window.pageYOffset
    }
  } else {
    return {
      x: document.body.scrollLeft + document.documentElement.scrollLeft,
      y: document.body.scrollTop + document.documentElement.scrollTop
    }
  }
}

返回浏览器视图尺寸getViewportOffset();

function getViewportOffset() {
  if (window.innerWidth) {
    return {
      w: window.innerWidth,
      h: window.innerHeight
    }
  } else {
    if (document.compatMode === 'BackCompat') { // 怪异模式
      return {
        w: document.body.clientWidth,
        h: document.body.clientHeight
      }
    } else { // 标准模式
      return {
        w: document.documentElement.clientWidth,
        h: document.documentElement.clientHeight
      }
    }
  }
}

封装方法，返回元素相对于文档的坐标 getElementPosition ;

function getElementPosition(element) {
  if (!element || !element.offsetLeft) return null;
  var actualLeft = element.offsetLeft,
    actualTop = element.offsetTop,
    current = element.offsetParent; // 取得元素的offsetParent 
  while (current !== null) {
    actualLeft += current.offsetLeft;
    actualTop += current.offsetTop;
    current = current.offsetParent;
  }
  return {
    left: actualLeft,
    top: actualTop
  };
} 

封装兼容性方法, 查询样式 getStyle(ele,prop);

function getStyle(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null)[prop]
  } else {
    return elem.currentStyle[prop];
  }
}

事件处理函数 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;
  }
}

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

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

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

function cancelHandler(event) {
  event = event || window.event;
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
  return false;
}

封装拖拽函数 drag(elem);

function stopBubble(event) {
  event = event || window.event;
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  }
}
function cancelHandler(event) {
  event = event || window.event;
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
  return false;
}
function getStyle(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null)[prop]
  } else {
    return elem.currentStyle[prop];
  }
}
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;
  }
}
function removeEvent(elem, type, handle) {
  if (elem.removeEventListener) {
    elem.removeEventListener(type, handle, false);
  } else if (elem.detachEvent) {
    elem.detachEvent('on' + type, function () {
      handle.call(elem);
    })
  } else {
    elem['on' + type] = null;
  }
}
function drag(elem) {
  var disX,
    disY;
  addEvent(elem, 'mousedown', function (e) {
    var event = e || window.event;
    disX = event.pageX - parseInt(getStyle(elem, 'left'));
    disY = event.pageY - parseInt(getStyle(elem, 'top'));
    addEvent(document, 'mousemove', mouseMove);
    addEvent(document, 'mouseup', mouseUp);
    stopBubble(event);
    cancelHandler(event);
  })
  function mouseMove(e) {
    var event = e || window.event;
    elem.style.left = event.clientX - disX + "px";
    elem.style.top = event.clientY - disY + "px";
  }
  function mouseUp(e) {
    var event = e || window.event;
    removeEvent(document, 'mousemove', mouseMove);
  }
}

封装函数，创建script

function loadScript(url, callback) {
  var script = document.createElement('script');
  script.type = "text/javascript";
  // 先绑定事件，在加载js
  if (script.readyState) {
    script.onreadystatechange = function () { // IE
      if (script.readyState == "complete" || script.readyState == "loaded") {
        callback();
      }
    }
  } else {
    script.onload = function () { // Safari chrome firefox opera
      callback();
    }
  }
  script.src = url;
  document.head.appendChild(script);
}