用js写一个鼠标跟随的回弹效果(有固定区域)

<style>
.list li .tops_pic {
    position: relative;
    transition: all 1.5s;
    height: 100px;
    line-height: 100px;
}
</style>
<div class="list contents">
            <ul class="ul">
              <li>
                <div class="tops_pic" onmousemove="DisplayCoord(event,this)" onmouseleave="DisplayNone(event,this)"><img src="../uploadfiles/brand/1.png" alt=""></div>
              </li>
              <li>
                <div class="tops_pic" onmousemove="DisplayCoord(event,this)" onmouseleave="DisplayNone(event,this)"><img src="../uploadfiles/brand/2.png" alt=""></div>
              </li>
              <li>
                <div class="tops_pic" onmousemove="DisplayCoord(event,this)" onmouseleave="DisplayNone(event,this)"><img src="../uploadfiles/brand/3.png" alt=""></div>
              </li>
            </ul>
          mp_x  mp_y 用来获取值
            <div id="mp_x" style="display: none"></div>
            <div id="mp_y" style="display: none"></div>
          </div>

function getX(obj){  
    var parObj=obj;    
    var left=obj.offsetLeft;    
    while(parObj=parObj.offsetParent){    
        left+=parObj.offsetLeft;    
    }    
    return left;    
}    

function getY(obj){    
    var parObj=obj;    
    var top=obj.offsetTop;    
    while(parObj = parObj.offsetParent){    
        top+=parObj.offsetTop;    
    }    
 return top;    
}    

function DisplayCoord(event,es){    
        var top,left,oDiv;    
    oDiv=document.getElementById("move1");    
    console.log($(es)[0]);
    top=getY($(es)[0]);    
    left=getX($(es)[0]);    
    $(es).css({"transform":"matrix(1, 0, 0, 1, "+(Math.abs(event.clientX-left+document.documentElement.scrollLeft)-60)+", "+(Math.abs(event.clientY-top+document.documentElement.scrollTop)-35)+")","transform-origin":"0px -500px 0px"})
    document.getElementById("mp_x").innerHTML = (Math.abs(event.clientX-left+document.documentElement.scrollLeft)-60);    
    document.getElementById("mp_y").innerHTML = (Math.abs(event.clientX-left+document.documentElement.scrollLeft)-60);       
    //注意:这里的60和35为盒子宽高的一半
}  
function DisplayNone(event,es){
    var istrue=true;
    var s=$('#mp_x').text();
    var y=$('#mp_y').text();
  var iTimer = setInterval(function() {
       s=s-4;
    if ( s-2<= 0) {
        s=0;
        y=0;
        clearInterval(iTimer);
    }
    y=y-3;
    if(y<=0){
        s=0;
        y=0;
        clearInterval(iTimer);
    }
    if(istrue){
      $(es).css({"transform":"matrix(1, 0, 0, 1, "+-parseInt(s)+", "+-parseInt(y)+")","transform-origin":"center"});
      istrue=false;
    }else{
      $(es).css({"transform":"matrix(1, 0, 0, 1, "+parseInt(s)+", "+parseInt(y)+")","transform-origin":"center"});
      istrue=true;
    }
  }, 200);
}