首页 新闻 搜索 专区 学院

找人解释一下这段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">&nbsp;</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">&nbsp;</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代码注释说明一下谢谢

qianduan的主页 qianduan | 初学一级 | 园豆:180
提问于:2010-10-05 10:17
< >
分享
最佳答案
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
日心尧亘 | 菜鸟二级 |园豆:235 | 2010-10-06 11:23
其他回答(2)
0

弹出窗口效果

林雨.... | 园豆:116 (初学一级) | 2010-10-05 14:14
0

学习JS DOM操作,都是这一块的知识点。

Astar | 园豆:40805 (高人七级) | 2010-10-06 11:32
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册