找人解释一下这段js代码？很难理解，谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>diao</title>
   <link rel="stylesheet" type="text/css" href="css/test.css" />
   <style type="text/css">
   div,img{margin:0;padding:0;}
   body{background:#666;}
#smallimg{width:400px;border:1px #fff solid;position:relative;float:left;margin:100px 100px 0 0;}
#smallimg img{width:400px;float:left;}
#showimg{width:150px;height:150px;background:#fff;opacity:0.5;filter:alpha(opacity=50);border:1px red solid;cursor:move;display:none;position:absolute;}
#bigimg{width:600px;height:600px;float:left;border:1px red solid;display:none;}
   </style>
</head>
<body>
<div id="txt"> </div>
<div id="smallimg">
<img src="http://hiphotos.baidu.com/diao_qingpeng/pic/item/894dcaac5a2f468e7dd92ad0.jpg" alt="shrek2"/>
<div id="showimg"></div>
</div>
<div id="bigimg"> </div>
<script type="text/javascript">
var $=function(id){return typeof(id)=="string"?document.getElementById(id):id};
var smallimg=$("smallimg");
var showimg=$("showimg");
var bigimg=$("bigimg");
var smallurl=smallimg.getElementsByTagName("img")[0].getAttribute("src");
var maxwidth=maxheight=showhalf=0;
smallimg.onmouseover=function(){
  showimg.style.display="block";
  bigimg.style.display="block";
  showhalf=showimg.offsetWidth/2;
  maxwidth=smallimg.clientWidth-showimg.offsetWidth;
  maxheight=smallimg.clientHeight-showimg.offsetHeight;
}
smallimg.onmousemove=function(e){
  e=e||window.event;
  mousepos=mouseposition(e);
  var Top=mousepos.y-smallimg.offsetTop-showhalf;
  var Left=mousepos.x-smallimg.offsetLeft-showhalf;
  var num=bigimg.clientWidth/showimg.clientWidth;
  Top=Top<0?0:Top>maxheight?maxheight:Top;
  Left=Left<0?0:Left>maxwidth?maxwidth:Left;
  showimg.style.top=Top+"px";
  showimg.style.left=Left+"px";
  bigimg.style.background="url("+smallurl+") -"+Left*num+"px -"+Top*num+"px no-repeat";
}
smallimg.onmouseout=function(){
  showimg.style.display="none";
  bigimg.style.display="none";
}
function mouseposition(ev){
  return{
   x:ev.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft),
   y:ev.clientY+(document.body.scrollTop||document.documentElement.scrollTop)
  }
}

</script>
</body>
</html>

给上面的js代码注释说明一下谢谢

波斯汪

浏览 519回答 3

找人解释一下这段js代码？很难理解，谢谢！

3回答