javascript+css鼠标悬浮放大图片

仿着淘宝网上面鼠标悬浮图片 放大图片的效果做的，感觉效果还是不太好，希望大家能完善完善！

缺点：放大的图片不像淘宝上面那样清晰，

<script language="JavaScript">
<!--
var srcX = 1024; //原图大小,可以任意设置
var srcY = 768;
var bigX = 200; //预览窗大小,可以任意设置
var bigY = 200;
var smallX = 300; //缩略图宽度
var smallY = srcY * smallX / srcX;
var viewX = bigX / srcX * smallX; //预览范围
var viewY = bigY / srcY * smallY;
var bl = srcX / smallX;//缩小比例
var border = 8; //边框
window.onload=function (){
 head.innerHTML="图片已载入";
 smallpic.width=smallX;
 smallpic.height=smallY;
 bigpic.width=srcX;
 bigpic.height=srcY;
 view.style.width=viewX;
 view.style.height=viewY;
 //smallbox.style.borderWidth=border;
 //bigbox.style.borderWidth=border;
 if (window.event){
  //smallbox.style.width=smallpic.offsetWidth+border*2;
  smallbox.style.width=smallpic.offsetWidth;
  smallbox.style.height=smallpic.offsetHeight;
  //smallbox.style.height=smallpic.offsetHeight+border*2;
  bigbox.style.width=bigX+border*2;
  bigbox.style.height=bigY+border*2;
 }else{
  smallbox.style.width=smallpic.offsetWidth;
  smallbox.style.height=smallpic.offsetHeight;
  bigbox.style.width=bigX;
  bigbox.style.height=bigY;
 }
 move(event);
}
function move(e){
document.getElementById('bigbox').style.visibility="visible";
 var e = window.event?window.event:e;
 var iebug = 0;
 if (window.event){
  var vX = e.offsetX - viewX/2;
  var vY = e.offsetY - viewY/2;
 }else{
  var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;
  var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;
  iebug = 2;
 }
 if (vX < 0) vX = 0;
 if (vY < 0) vY = 0;
 if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;
 if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;
 bigpico.style.marginLeft = - vX * bl
 bigpico.style.marginTop = - vY * bl
 view.style.left = vX + smallbox.offsetLeft + border;
 view.style.top = vY + smallbox.offsetTop + border;
}
//-->
</script>
<style type="text/css">
<!--
*{padding:0;margin:0}
img{display:block;}
#smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox{border:1px solid red;width:0px;height:0px;float:left;overflow:hidden}
#view{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#head{text-align:center;line-height:40px;font:bold 16px/40px;color:red}
//-->
</style>
<div id="head">图片loading...</div>
<div id="smallbox" onmouseout="document.getElementById('bigbox').style.visibility='hidden'"><img id="smallpic" src="IVU.jpg" border="0" onmousemove="move(event)"></div>
<div id="bigbox"><div id="bigpico"><img id="bigpic" src="IVU.jpg" border="0"></div></div>
<div id="view" onmousemove="move(event)"></div>

======================