超级困惑，谁知道淘宝网鼠标移动到图片会放大是怎么实现的？？

－－很多人以为是在图像上响应onmouseover/out事件，其实不是。看一看淘宝页面代码，图像上根本没有绑定onmouseover事件。
估计是在body.onload实现的，不过没找到。神奇＆困惑。。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

不一定要有明显的onmouseover事件，在系统初始化的时候，图片已经绑定了事件了
UP
学习下
谁能给个代码  不用onmouseover/out事件实现层的显/隐
大概判断出来了，应该是依据img的class来判断的。同一页面多个img以此断定是否zoom显示bigimg。至于事件就是直接响应event了。原来一直以为会依据通常的id或name，这里看来显然不是了。也很有趣。
<span id="s1" style = "width : 150"><a href="http://www.helpor.net" target="_blank" onmouseover="www_helpor_net.style.width='200';" onmouseout="www_helpor_net.style.width= '150';"><Img src="http://code.helpor.net/picture/swimming.gif" id="www_helpor_net"></a></span>
代码如上，src=
是图片路径
给分吧
lz通过客户端的页面所见的是经过服务器编译后的Html超文本标记语言代码吧!那么页面图片响应用户变大的效果也并非只有onmouseover事件可以实现,也许是网站设计开发人员在服务器段用了某种方法给隐藏了,或者不是显式的而是隐式的调用了该事件.
see here:http://www.cnblogs.com/sohighthesky/archive/2009/11/15/1603348.html
如果用ext的话，应该可以实现的
期待一个完整的DOME！发我邮箱 [email protected]  超级感谢！
http://www.open-lib.com/Type/188-1.jsp完整的插件....
document.getElementById('imgObject').onmouseover=function(){
      alert('你把鼠标移动到图片对象了');
}
<script type="text/javascript">
window.onload=function(){
   document.getElementById('imgObject').onmouseover=function(){
      alert('你把鼠标移动到图片对象了');
   }
}
</script>
<img src="http://avatar.profile.csdn.net/3/3/3/2_zhuhuquan29.jpg" alt="" id="imgObject"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script type="text/javascript">
window.onload=function(){
document.getElementById('imgObject').onmouseover=function(){
this.style.border="1px solid red";
this.style.width="150px";
this.onmouseout=function(){
this.style.border="0px";
this.style.width="100px";
};
}
}
</script>
<body>
<img src="http://avatar.profile.csdn.net/3/3/3/2_zhuhuquan29.jpg" width="100" alt="" id="imgObject"/>
</body>
</html>
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=gb2312" />
<title>js 图片放大镜效果代码</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>
<script language="JavaScript">
  var is_mov="";
  var x,y,z;
  function   test(o){
  is_mov="true";
  var  tem=o;
  y=document.getElementById("pic");
  if(event.offsetX>90&&o.style.pixelLeft<176) {o.style.pixelLeft=5+o.style.pixelLeft;y.style.posLeft=-11.3+y.style.posLeft;}//右平移
  if(event.offsetX<84&&o.style.pixelLeft>0) {o.style.pixelLeft=-5+o.style.pixelLeft;y.style.posLeft=11.3+y.style.posLeft;}//左平移
  if(event.offsetY>54&&o.style.pixelTop<148) {o.style.pixelTop=5+o.style.pixelTop;y.style.posTop=-11.5+y.style.posTop;}//下平移
  if(event.offsetY<48&&o.style.pixelTop>0) {o.style.pixelTop=-5+o.style.pixelTop;y.style.posTop=11.5+y.style.posTop;}//上平移
  if(x.style.pixelLeft<0) x.style.pixelLeft=0;
  if(x.style.pixelTop<0) x.style.pixelTop=0;
  if(x.style.pixelLeft>180) x.style.pixelLeft=180;
  if(x.style.pixelTop>150) x.style.pixelTop=150;
  //alert(event.offsetX+","+event.offsetY)
  }
  function   pos(){//alert("pos");
  x=document.getElementById("shape");
  x.style.pixelLeft=0;
  x.style.pixelTop=0;
  if(event.offsetX>88) {x.style.pixelLeft=event.offsetX-87;}
  if(event.offsetY>49) {x.style.pixelTop =event.offsetY-51;}
  if(event.offsetY<51 &&event.offsetX<87) {x.style.left=0;x.style.top =0;}//左上角
  if(event.offsetY<51 &&event.offsetX>267) {x.style.left=180;x.style.top =0;}//右上角
  if(event.offsetY>201 &&event.offsetX<87) {x.style.left=0;x.style.top =150;}//左下角
  if(event.offsetX>267 &&event.offsetY>201) {x.style.left=180;x.style.top =150;}//右下角
  if(x.style.pixelLeft<0) x.style.pixelLeft=0;
  if(x.style.pixelTop<0) x.style.pixelTop=0;
  if(x.style.pixelLeft>180) x.style.pixelLeft=180;
  if(x.style.pixelTop>150) x.style.pixelTop=150;
  x.style.display="block";

  z=document.getElementById("pic"); z.style.posLeft=-11.3*(x.style.pixelLeft/5);z.style.posTop=-11.5*(x.style.pixelTop/5);
  y=document.getElementById("dv"); y.style.display="block";
  //alert(event.offsetX+","+event.offsetY);
  }
  function   mov_pic(){
  if(event.offsetX>354||event.offsetY>252||event.offsetX<0||event.offsetY<0){ x=document.getElementById("shape"); x.style.display="none";y=document.getElementById("dv"); y.style.display="none";}
  //alert(event.offsetX+","+event.offsetY);
  }
  function   pic_out(){
  if(event.offsetX>174||event.offsetY>102||event.offsetX<0||event.offsetY<0){ x=document.getElementById("shape"); x.style.display="none";y=document.getElementById("dv"); y.style.display="none";}
  //alert(event.offsetX+","+event.offsetY);
  }
</script>
<body>
<DL style="position:absolute;">
<DT><img  alt="js 图片放大镜效果代码"  id="shape" src="a.gif" border=1  width=174 height=102 style="display:none;filter:alpha(opacity=40);position:absolute;" onmousemove="javascript:test(this);"  onmouseout="javascript:pic_out()" /></DT>
<DD style="margin:0;">
<img  alt="js 图片放大镜效果代码"  src="/get_pic/20100116123402272.jpg" border=1  width=354 height=252     onmouseover="javascript:pos()" onmouseout="javascript:mov_pic()" />
<div id="dv" style="BORDER: Black 1px solid;position:relative;left:369px;top:-258px; OVERFLOW: hidden;WIDTH: 390px;HEIGHT: 253px;CURSOR: hand;WHITE-SPACE: nowrap;display:none;" >
<img  alt="js 图片放大镜效果代码"  id="pic"  border=0  src="/get_pic/20100116123402272.jpg" style="position:relative;" width=800 height=600 />
</div>
</DD>
</DL>
</body>
</html>
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=gb2312" />
<title>js 图片放大镜效果代码</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>
<script language="JavaScript">
  var is_mov="";
  var x,y,z;
  function   test(o){
  is_mov="true";
  var  tem=o;
  y=document.getElementById("pic");
  if(event.offsetX>90&&o.style.pixelLeft<176) {o.style.pixelLeft=5+o.style.pixelLeft;y.style.posLeft=-11.3+y.style.posLeft;}//右平移
  if(event.offsetX<84&&o.style.pixelLeft>0) {o.style.pixelLeft=-5+o.style.pixelLeft;y.style.posLeft=11.3+y.style.posLeft;}//左平移
  if(event.offsetY>54&&o.style.pixelTop<148) {o.style.pixelTop=5+o.style.pixelTop;y.style.posTop=-11.5+y.style.posTop;}//下平移
  if(event.offsetY<48&&o.style.pixelTop>0) {o.style.pixelTop=-5+o.style.pixelTop;y.style.posTop=11.5+y.style.posTop;}//上平移
  if(x.style.pixelLeft<0) x.style.pixelLeft=0;
  if(x.style.pixelTop<0) x.style.pixelTop=0;
  if(x.style.pixelLeft>180) x.style.pixelLeft=180;
  if(x.style.pixelTop>150) x.style.pixelTop=150;
  //alert(event.offsetX+","+event.offsetY)
  }
  function   pos(){//alert("pos");
  x=document.getElementById("shape");
  x.style.pixelLeft=0;
  x.style.pixelTop=0;
  if(event.offsetX>88) {x.style.pixelLeft=event.offsetX-87;}
  if(event.offsetY>49) {x.style.pixelTop =event.offsetY-51;}
  if(event.offsetY<51 &&event.offsetX<87) {x.style.left=0;x.style.top =0;}//左上角
  if(event.offsetY<51 &&event.offsetX>267) {x.style.left=180;x.style.top =0;}//右上角
  if(event.offsetY>201 &&event.offsetX<87) {x.style.left=0;x.style.top =150;}//左下角
  if(event.offsetX>267 &&event.offsetY>201) {x.style.left=180;x.style.top =150;}//右下角
  if(x.style.pixelLeft<0) x.style.pixelLeft=0;
  if(x.style.pixelTop<0) x.style.pixelTop=0;
  if(x.style.pixelLeft>180) x.style.pixelLeft=180;
  if(x.style.pixelTop>150) x.style.pixelTop=150;
  x.style.display="block";

  z=document.getElementById("pic"); z.style.posLeft=-11.3*(x.style.pixelLeft/5);z.style.posTop=-11.5*(x.style.pixelTop/5);
  y=document.getElementById("dv"); y.style.display="block";
  //alert(event.offsetX+","+event.offsetY);
  }
  function   mov_pic(){
  if(event.offsetX>354||event.offsetY>252||event.offsetX<0||event.offsetY<0){ x=document.getElementById("shape"); x.style.display="none";y=document.getElementById("dv"); y.style.display="none";}
  //alert(event.offsetX+","+event.offsetY);
  }
  function   pic_out(){
  if(event.offsetX>174||event.offsetY>102||event.offsetX<0||event.offsetY<0){ x=document.getElementById("shape"); x.style.display="none";y=document.getElementById("dv"); y.style.display="none";}
  //alert(event.offsetX+","+event.offsetY);
  }
</script>
<body>
<DL style="position:absolute;">
<DT><img  alt="js 图片放大镜效果代码"  id="shape" src="a.gif" border=1  width=174 height=102 style="display:none;filter:alpha(opacity=40);position:absolute;" onmousemove="javascript:test(this);"  onmouseout="javascript:pic_out()" /></DT>
<DD style="margin:0;">
<img  alt="js 图片放大镜效果代码"  src="/get_pic/20100116123402272.jpg" border=1  width=354 height=252     onmouseover="javascript:pos()" onmouseout="javascript:mov_pic()" />
<div id="dv" style="BORDER: Black 1px solid;position:relative;left:369px;top:-258px; OVERFLOW: hidden;WIDTH: 390px;HEIGHT: 253px;CURSOR: hand;WHITE-SPACE: nowrap;display:none;" >
<img  alt="js 图片放大镜效果代码"  id="pic"  border=0  src="/get_pic/20100116123402272.jpg" style="position:relative;" width=800 height=600 />
</div>
</DD>
</DL>
</body>
</html>