JavaScript图片放大镜效果代码[代码比较简单]

ttx9n · 发表于 2011-2-12 15:36:14

实用漂亮的放大镜效果，基于JavaScript代码实现，貌似代码不太多，但效果确实不错，因调用的图片比较大，所以运行效果后请稍等一会，等待图片加载。

<!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> 
<style type="text/css"> 
#div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} 
#div1 img{width:304px; height:222px;} 
#div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); opacity:0.2;} 
.show { width:100%; height:100%; background:red; position:absolute; z-index:10px; filter:alpha(opacity:10); opacity:0.1; left:0px; top:0px; } 
#div2 {width:304px; height:222px; position:relative; display:none; overflow:hidden; margin:0px auto 0px;} 
#img1 { position:absolute;} 
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript 图片放大代码</title> 
<script type="text/javascript"> 
window.onload=function () 
{ 
var oDiv=document.getElementById('div1'); 
var oShow=oDiv.getElementsByTagName('div')[0]; 
var oSpan=oDiv.getElementsByTagName('span')[0]; 
var oImg=document.getElementById('img1'); 
oShow.onmouseover=function() 
{ 
oSpan.style.display='block'; 
oImg.parentNode.style.display='block'; 
}; 
oShow.onmouseout=function() 
{ 
oSpan.style.display='none'; 
oImg.parentNode.style.display='none'; 
}; 
oShow.onmousemove=function(ev) 
{ 
var oEvent=ev||event; 
var x=oEvent.clientX-oDiv.offsetLeft-oSpan.offsetWidth/2; 
var y=oEvent.clientY-oDiv.offsetTop-oSpan.offsetHeight/2;

if(x<0) 
{ 
x=0; 
} 
else if(x>oShow.offsetWidth-oSpan.offsetWidth) 
{ 
x=oShow.offsetWidth-oSpan.offsetWidth; 
} 
if(y<0) 
{ 
y=0; 
} 
else if(y>oShow.offsetHeight-oSpan.offsetHeight) 
{ 
y=oShow.offsetHeight-oSpan.offsetHeight 
}

oSpan.style.left=x+'px'; 
oSpan.style.top=y+'px'; 
var percentX=x/(oShow.offsetWidth-oSpan.offsetWidth); 
var percentY=y/(oShow.offsetHeight-oSpan.offsetHeight); 
var oImgparent=oImg.parentNode; 
oImg.style.left=-percentX*(oImg.offsetWidth-oImgparent.offsetWidth)+'px'; 
oImg.style.top=-percentY*(oImg.offsetHeight-oImgparent.offsetHeight)+'px'; 
}; 
}; 
</script> 
</head> 
<body> 
 
<img src="https://www.jb51.net/files.jb51.net/demoimg/201102/11_2_2.jpg" /> 
 
 
 
 
<img id="img1" src="https://www.jb51.net/files.jb51.net/demoimg/201102/11_2_2.jpg" /> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

.l4 · 发表于 2022-8-20 01:06:34

感谢楼主分享

e5plu · 发表于 2022-9-24 14:08:25

66666666666666666666

123456 · 发表于 2022-12-9 23:03:00

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

wxrf98xr · 发表于 2023-1-22 14:38:23

呵呵呵呵呵呵呵a

lsc54 · 发表于 2023-10-22 04:06:45

还有人在不。。。。。。。。。。啊

溪谷玉贤 · 发表于 2023-12-8 22:56:24

那三门，你们谁寂寞才快乐撒

9jduu05 · 发表于 2024-4-3 00:32:13

而非为吾问无为谓娃娃

jasonlong · 发表于 2024-4-27 04:03:49

啪啪啪生怕PSP怕

6q8s6p21 · 发表于 2024-5-1 16:26:25

抽根烟，下来看看再说

账号		自动登录	找回密码
密码			立即注册

[JavaScript] JavaScript图片放大镜效果代码[代码比较简单]

相关帖子