找人解释一下这段js代码？很难理解，谢谢！
0
悬赏园豆：10
[已解决问题]
解决于 2010-10-08 18:18
<!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代码注释说明一下谢谢
最佳答案
0
这个javascript是实现一个放大镜的效果，代码不是很难，关键就是定位问题，我给你一个图片，里面对各种浏览器的定位有很清楚的说明。你看看，代码我也注释了，按我自己的想法注释的，可能有的地方也不太合适。我们共同学习啦……
var $ = function(id){//用id来获得对象
return typeof(id) == "string" ? document.getElementById(id) : id
};
var smallimg = $("smallimg");//相当于document.getElementById("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;//获得事件模型，ie事件模型和其他浏览器的事件模型不同
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)
}
}
【附件：网页窗口对象标示】
收获园豆：10
其他回答(2)
0
弹出窗口效果
0
学习JS DOM操作，都是这一块的知识点。
