function $_$(str){
  return new BATE(str);
}
function BATE(str){
  this.element = document.querySelector(str);
}
var $css3Transform = function(element, value) {
    var arrPriex = ["Webkit", "Ms", "Moz", "O", "" ,"-o-", "-ms-", "-moz-", "-webkit-",], length = arrPriex.length;
    for (var i=0; i < length; i+=1) {
         element.style[arrPriex[i] + "Transform"] = value;
    }
};
BATE.prototype.width = function(){
  var e = this.element;
  if ( window.getComputedStyle ) {
    return getComputedStyle( e , null )['width'];
  }else{
    return e.currentStyle['width'];
  }
}
BATE.prototype.height = function(){
  var e = this.element;
  if ( window.getComputedStyle ) {
    return getComputedStyle( e , null )['height'];
  }else{
    return e.currentStyle['height'];
  }
}
function centerXY(ele){
  var arr = [];
  var centerX = parseFloat(ele.width())/2;
  var centerY = parseFloat(ele.height())/2;
  arr.push(centerX);
  arr.push(centerY);
  return arr;
}
var n = 0;
function matrixIn(father,child,e,level){
  if (!level) {
    level = 100;
  }
  var e = e || event;
  var x = parseFloat(centerXY(father)[0]-e.clientX)/level ;
  var y = parseFloat(centerXY(father)[1]-e.clientY)/level ;
  n++;
  if(n==3){
    n=0;
    $css3Transform(child.element,'matrix(1.02,0,0,1.02,'+x+','+y+')');
  }
}
function matrixOut(child){
   $css3Transform(child.element,'matrix(1,0,0,1,0,0)');
}

function bannerAnimate(fatherID,childID,level){
  if(document.querySelector){
    var dom = $_$(fatherID),dom2 = $_$(childID);
    dom.element.onmousemove = function(e){
      matrixIn(dom,dom2,e,level);
    }
    dom.element.onmouseleave = function(){
      matrixOut(dom2);
    }
  }else{
    console.log('放弃吧，你的浏览器运行不了这个东西');
  }
  
}