为什么js特效放大镜的坐标不一致？帮我分析一下。谢谢

鼠标在上面的小图上快速拖动的时候，超出范围后，为什么大图的坐标值不是0呢 ？
每次光标在小图上快速来回，大图的坐标值都一样的。只有缓慢的移动光标才能正常的到0，有什么办法解决？另外，为什么拖动的时候。小图的光标位置，却不是在大图的中心位置上？
意思就是说每次拖动都想让放大的部分在大图的框的中心显示<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style type="text/css">
*{margin:0;padding:0;}
body{background: #000}
li,ul{ list-style:none outside none; }
.viewWindow{ width:200px;height:200px;margin:15px auto; background: orange}
.large{ width:200px;height:200px;overflow:hidden;margin:0 auto;position: relative; }
#largeImg{ position: absolute;top:0;left:0;width:1024px;height: 768px;background: red; } </style></head>
<body>

<div class="viewWindow">
<img src="http://ww2.sinaimg.cn/mw690/71e47b6bgw1e8vq53zrrdj20xc1e0e61.jpg" width="200" height="200" alt="">
</div> <div class="large">
<img src="http://ww2.sinaimg.cn/mw690/71e47b6bgw1e8vq53zrrdj20xc1e0e61.jpg" alt="" id="largeImg" width="690" height="1035">
</div> <script type="text/javascript"> function log(val){
return console.log(val);
} var v = $(".viewWindow");
var l = $(".large");
var i = $("#largeImg"); var sum = i.height() - l.height();
var rate = sum/v.height(); var sumw = i.width() - l.width();
var ratew = sumw/v.width(); v.bind("mouseover",function(){
$(document).bind("mousemove",move)
}) v.bind("mouseout",function(){
$(document).unbind("mousemove");
}) function move(event){
console.log((event.clientX)-v.offset().left)
$("#largeImg").css("left",((event.clientX)-v.offset().left)*-ratew)
$("#largeImg").css("top",((event.clientY)-v.offset().top)*-rate)
} </script></body>
</html>