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

#1

不一定要有明显的onmouseover事件，在系统初始化的时候，图片已经绑定了事件了

#2

UP
学习下
谁能给个代码不用onmouseover/out事件实现层的显/隐

#3

引用 1 楼 redcn2004 的回复:

不一定要有明显的onmouseover事件，在系统初始化的时候，图片已经绑定了事件了

大概判断出来了，应该是依据img的class来判断的。同一页面多个img以此断定是否zoom显示bigimg。至于事件就是直接响应event了。原来一直以为会依据通常的id或name，这里看来显然不是了。也很有趣。

#4

<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=
是图片路径
给分吧

#5

引用 4 楼 oraclerjsp 的回复:

<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=
是图片路径
给分吧

#6

lz通过客户端的页面所见的是经过服务器编译后的Html超文本标记语言代码吧!那么页面图片响应用户变大的效果也并非只有onmouseover事件可以实现,也许是网站设计开发人员在服务器段用了某种方法给隐藏了,或者不是显式的而是隐式的调用了该事件.

#7

引用 4 楼 oraclerjsp 的回复:

<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=
是图片路径
给分吧

这不能到达效果，这只是使图片变大的！

#8

see here: http://www.cnblogs.com/sohighthesky/archive/2009/11/15/1603348.html

#9

谈笑有鸿儒往来无白丁

#10

如果用ext的话，应该可以实现的

#11

图片这么大插件

#12

期待一个完整的DOME！发我邮箱 tfnvj208@163.com 超级感谢！

#13

http://www.open-lib.com/Type/188-1.jsp

完整的插件....

#14


document.getElementById('imgObject').onmouseover=function(){
      alert('你把鼠标移动到图片对象了');
}

#15


<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"/>

#16

引用 15 楼 zhuhuquan29 的回复:

HTML code

<script type="text/javascript">
window.onload=function(){
   document.getElementById('imgObject').onmouseover=function(){
      alert('你把鼠标移动到图片对象了');
   }
}
</script>
<img src="ht……

+1

#17


<!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>

#18

楼主速度来给力啊~~~~~~~~~~~~呵呵。。。。超级困惑，谁知道淘宝网鼠标移动到图片会放大是怎么实现的？？

#19

可以参考这个类似的图片放大效果

#20

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>

#21

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>

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

21 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

#17

#18

#19

#20

#21

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

#17

#18

#19

#20

#21

相关文章