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

no_limit 2008-07-23 09:19:09
－－很多人以为是在图像上响应onmouseover/out事件，其实不是。看一看淘宝页面代码，图像上根本没有绑定onmouseover事件。
估计是在body.onload实现的，不过没找到。神奇＆困惑。。。。。。。。
...全文
3051 21 打赏 收藏 转发到动态 举报
写回复
用AI写文章
21 条回复
切换为时间正序
请发表友善的回复…
发表回复
xinshengniu 2011-02-22
  • 打赏
  • 举报
 回复
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>
xinshengniu 2011-02-22
  • 打赏
  • 举报
 回复
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>
cloudgamer 2011-02-22
  • 打赏
  • 举报
 回复
可以参考这个类似的图片放大效果
zhuhuquan29 2011-02-22
  • 打赏
  • 举报
 回复
楼主速度来给力啊~~~~~~~~~~~~呵呵。。。。
zhuhuquan29 2011-02-22
  • 打赏
  • 举报
 回复 


<!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>
Crossgate_J 2011-02-22
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 zhuhuquan29 的回复:]
HTML code

<script type="text/javascript">
window.onload=function(){
document.getElementById('imgObject').onmouseover=function(){
alert('你把鼠标移动到图片对象了');
}
}
</script>
<img src="ht……
[/Quote]
+1
zhuhuquan29 2011-02-22
  • 打赏
  • 举报
 回复 


<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"/>
zhuhuquan29 2011-02-22
  • 打赏
  • 举报
 回复 


document.getElementById('imgObject').onmouseover=function(){

      alert('你把鼠标移动到图片对象了');

}

smildlzj 2011-02-21
  • 打赏
  • 举报
 回复
http://www.open-lib.com/Type/188-1.jsp

完整的插件....
tfnvj2008 2011-02-21
  • 打赏
  • 举报
 回复
期待一个完整的DOME！发我邮箱 tfnvj208@163.com 超级感谢！
chen_xiangguo 2009-12-06
  • 打赏
  • 举报
 回复
图片这么大插件
三月暖阳 2009-12-06
  • 打赏
  • 举报
 回复
如果用ext的话，应该可以实现的
moliu 2009-12-06
  • 打赏
  • 举报
 回复
谈笑有鸿儒往来无白丁
tanlianguang 2009-12-05
  • 打赏
  • 举报
 回复
[Quote=引用 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=
是图片路径
给分吧
[/Quote]
这不能到达效果，这只是使图片变大的！
oraclerjsp 2008-07-23
  • 打赏
  • 举报
 回复
<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=
是图片路径
给分吧
no_limit 2008-07-23
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 redcn2004 的回复:]
不一定要有明显的onmouseover事件，在系统初始化的时候，图片已经绑定了事件了
[/Quote]

大概判断出来了，应该是依据img的class来判断的。同一页面多个img以此断定是否zoom显示bigimg。至于事件就是直接响应event了。原来一直以为会依据通常的id或name，这里看来显然不是了。也很有趣。
wtcsy 2008-07-23
  • 打赏
  • 举报
 回复
UP
学习下
谁能给个代码 不用onmouseover/out事件实现层的显/隐
redcn2004 2008-07-23
  • 打赏
  • 举报
 回复
不一定要有明显的onmouseover事件，在系统初始化的时候，图片已经绑定了事件了
zhuhong110450 2008-07-23
  • 打赏
  • 举报
 回复
lz通过客户端的页面所见的是经过服务器编译后的Html超文本标记语言代码吧!那么页面图片响应用户变大的效果也并非只有onmouseover事件可以实现,也许是网站设计开发人员在服务器段用了某种方法给隐藏了,或者不是显式的而是隐式的调用了该事件.
加载更多回复（1）
智慧法院专题-智慧法院业务解决方案
2、如何借助新基建技术实现网上法庭，移动智慧法院等创新业务场景？ 3、如何借助大数据技术实现案例智能分流、类案分析、信用画像，提高案件内部办理效率？ 4、如何借助人工智能和智能化设备，减轻人工成本，提高...
有哪些网站用爬虫爬取能得到很有价值的数据？
2、汽车之家 3、天猫、京东、淘宝等电商网站 4、58同城的房产、安居客、Q房网、搜房等房产网站 5、大众点评、美团网等餐饮及消费类网站 6、58同城等分类信息网站 7、拉勾网、中华英才网等招聘网站 9、应用宝等App...
网站分析
整体的思想是width固定为1000px（无响应式），两边的margin是auto，这样，可以在浏览器大小发生变化时，实现一部分margin的响应式，但是内容没有实现响应式。 整体看上去还是比较朴素。  　用户体验：...
前端面试笔记随笔---kalrry
面试笔记---kalrry第一部分：HTML5+CSS31、父元素和子元素宽高不固定，如何实现水平垂直居中2、分别实现骰子中的'一点' 和 '三点' 的布局。3、简述选择器~和+的区别。4、简述box-sizing的有效值以及所对应的盒模型...
前端面试总结七
1.JS的事件冒泡和事件...事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘上的某些按键，事件还可能是web浏览器中发生的事情，比如说某个web页面加载完成，或者是用户滚动窗口或改变窗口大小。 ...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章