这个效果求解决。。谢谢

查看的图片跟右边的背景图片的background坐标不一致。该怎么来计算的
$("showImg").style.background = "url(482afbfa43cd971d.jpg) -"+ left*num+"px -" + top*num+"px" + " no-repeat";
<!doctype html>
<html>
<head>
<title>test</title>
<style type="text/css">
*{margin:0;padding:0;}
.img{width:400px;margin:0 auto;height:400px;position:relative;}
.showPic{position:absolute;top:0;left:0;width:100px;height:100px;background:red;opacity:0.5}
.showImg{width:300px;height:300px;border:1px solid orange;position:absolute;top:0;left:0;display:none;overflow:hidden}
</style>
</head>
<body>
<div class="img" id="img">
<img src="482afbfa43cd971d.jpg" width="400" height="400" />
<span class="showPic" id="showPic"></span>
</div>
<div class="showImg" id="showImg">

</div>
<script type="text/javascript">
var $ = function(id){return typeof id === "string"?document.getElementById(id):id};
var maxWidth = $("showPic").offsetWidth/2;
var target = function(e){
return {
x: e.offsetX?e.offsetX:e.layerX,
y:e.offsetY?e.offsetY:e.layerY
}
}
var client = function(e){
return{
x:e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft),
y:e.clientY + (document.body.scrollTop || document.documentElement.scrollTop)
}
}
$("img").onmouseover = function(e){
var e = e || window.event;
$("showImg").style.display = "block"; }
$("img").onmousemove = function(e){
var e = e || window.event;
var num = $("showPic").clientWidth/$("showImg").clientWidth;
$("showImg").style.left = (this.offsetLeft+this.offsetWidth) + "px";
var left  =client(e).x -$("img").offsetLeft - maxWidth;
var top = client(e).y -$("img").offsetTop - maxWidth;
$("showPic").style.left = left  + "px";
$("showPic").style.top = top  + "px";
if($("showPic").offsetLeft < 0){
$("showPic").style.left = 0;
}else if($("showPic").offsetLeft > (this.offsetWidth-$("showPic").offsetWidth)){
$("showPic").style.left = (this.offsetWidth-$("showPic").offsetWidth) + "px";
}
if($("showPic").offsetTop < 0){
$("showPic").style.top = 0;
}else if($("showPic").offsetTop > (this.offsetHeight-$("showPic").offsetHeight)){
$("showPic").style.top = (this.offsetHeight-$("showPic").offsetHeight) + "px";
}

$("showImg").style.background = "url(482afbfa43cd971d.jpg) -"+ left*num+"px -" + top*num+"px" + " no-repeat";
}
</script>
</body>
</html>