找人解释一下这段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代码注释说明一下谢谢
波斯汪3回答
-
白猪掌柜的
弹出窗口效果 -
慕哥9229398
学习JS DOM操作，都是这一块的知识点。
随时随地看视频慕课网APP
相关分类
JavaScript
