js实现，支持IE和Firefox，方便易用，效果如图：
下面是个demo的代码：
下面是个demo的代码：
<!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>
<script language="JavaScript" type="text/javascript">
<!--
var srcX; //原图大小
var srcY;
var bigX; //预览窗大小,可以任意设置
var bigY;
var smallX; //缩略图宽度
var smallY;
var viewX; //预览范围
var viewY;
var bl;//缩小比例
var border; //边框
window.onload=function ()
{
var bigbox = document.getElementById("bigbox");
var view = document.getElementById("view");
var smallpic = document.getElementById("smallpic");
var bigpic = document.getElementById("bigpic");
//初始设置
srcX = smallpic.width; //原图大小
srcY = smallpic.height;
bigX = 360; //预览窗大小,可以任意设置
bigY = 360;
smallX = 400; //缩略图宽度
smallY = srcY * smallX / srcX;
viewX = bigX / srcX * smallX; //预览范围
viewY = bigY / srcY * smallY;
bl = srcX / smallX;//缩小比例
border = 2; //边框
bigbox.style.display='none';
view.style.display='none';
smallpic.width=smallX;
smallpic.height=smallY;
bigpic.width=srcX ;
bigpic.height=srcY ;
view.style.width=viewX + 'px';
view.style.height=viewY + 'px';
bigbox.style.borderWidth=border + 'px';
if (window.event) {
bigbox.style.width=bigX + border*2 - 20;
bigbox.style.height=bigY + border*2 - 20;
} else {
bigbox.style.width=bigX + 'px';
bigbox.style.height=bigY + 'px';
}
}
function move(e){
var e = window.event?window.event:e;
var iebug = 0;
var bigbox = document.getElementById("bigbox");
var bigpic = document.getElementById("bigpic");
var view = document.getElementById("view");
var smallpic = document.getElementById("smallpic");
bigbox.style.display="";
view.style.display="";
if (window.event) {
var vX = e.offsetX - viewX/2;
var vY = e.offsetY - viewY/2;
} else {
var vX = e.pageX - viewX/2 - smallpic.offsetLeft - border;
var vY = e.pageY - viewY/2 - smallpic.offsetTop - border;
iebug = 2;
}
if (vX < 0) vX = 0;
if (vY < 0) vY = 0;
if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;
if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;
bigpic.style.marginLeft = - vX * bl + 'px';
bigpic.style.marginTop = - vY * bl + 'px';
if (window.event) {
view.style.left = vX + e.clientX - e.offsetX - 2;
view.style.top = vY + e.clientY - e.offsetY - 2;
if(e.clientX - e.offsetX > smallpic.offsetWidth || e.clientY - e.offsetY > smallpic.offsetHeight)
smallpic.onmouseout();
} else {
view.style.left = (vX + smallpic.offsetLeft) + 'px';
view.style.top = (vY + smallpic.offsetTop) + 'px';
}
}
function out()
{
var bigbox = document.getElementById("bigbox");
var view = document.getElementById("view");
bigbox.style.display="none";
view.style.display="none";
}
//-->
</script>
<style type="text/css">
<!--
#smallpic{position:relative}
#bigbox{border:1px #c33 solid; overflow:hidden}
#view{border:1px #ddd solid;position:absolute}
//-->
</style>
</head>
<body bgcolor="#999999">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>11</td>
<td height="100">12</td>
<td>13</td>
</tr>
<tr>
<td width="100" height="500" align="right">2123423423
</td>
<td width="500">sdfsdfsd<img id="smallpic" src="a.jpg" border="0" onmousemove="move(event)" onmouseout="out()"></td>
<td width="500">
<div id="bigbox"><img id="bigpic" src="a.jpg" border="0"></div>
<div id="view" onmousemove="move(event)" onmouseout="out()"></div></td>
</tr>
<tr>
<td>31`</td>
<td>32</td>
<td>33</td>
</tr>
</table>
<br /><br /><br /><br />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片放大镜的js实现</title>
<script language="JavaScript" type="text/javascript">
<!--
var srcX; //原图大小
var srcY;
var bigX; //预览窗大小,可以任意设置
var bigY;
var smallX; //缩略图宽度
var smallY;
var viewX; //预览范围
var viewY;
var bl;//缩小比例
var border; //边框
window.onload=function ()
{
var bigbox = document.getElementById("bigbox");
var view = document.getElementById("view");
var smallpic = document.getElementById("smallpic");
var bigpic = document.getElementById("bigpic");
//初始设置
srcX = smallpic.width; //原图大小
srcY = smallpic.height;
bigX = 360; //预览窗大小,可以任意设置
bigY = 360;
smallX = 400; //缩略图宽度
smallY = srcY * smallX / srcX;
viewX = bigX / srcX * smallX; //预览范围
viewY = bigY / srcY * smallY;
bl = srcX / smallX;//缩小比例
border = 2; //边框
bigbox.style.display='none';
view.style.display='none';
smallpic.width=smallX;
smallpic.height=smallY;
bigpic.width=srcX ;
bigpic.height=srcY ;
view.style.width=viewX + 'px';
view.style.height=viewY + 'px';
bigbox.style.borderWidth=border + 'px';
if (window.event) {
bigbox.style.width=bigX + border*2 - 20;
bigbox.style.height=bigY + border*2 - 20;
} else {
bigbox.style.width=bigX + 'px';
bigbox.style.height=bigY + 'px';
}
}
function move(e){
var e = window.event?window.event:e;
var iebug = 0;
var bigbox = document.getElementById("bigbox");
var bigpic = document.getElementById("bigpic");
var view = document.getElementById("view");
var smallpic = document.getElementById("smallpic");
bigbox.style.display="";
view.style.display="";
if (window.event) {
var vX = e.offsetX - viewX/2;
var vY = e.offsetY - viewY/2;
} else {
var vX = e.pageX - viewX/2 - smallpic.offsetLeft - border;
var vY = e.pageY - viewY/2 - smallpic.offsetTop - border;
iebug = 2;
}
if (vX < 0) vX = 0;
if (vY < 0) vY = 0;
if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;
if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;
bigpic.style.marginLeft = - vX * bl + 'px';
bigpic.style.marginTop = - vY * bl + 'px';
if (window.event) {
view.style.left = vX + e.clientX - e.offsetX - 2;
view.style.top = vY + e.clientY - e.offsetY - 2;
if(e.clientX - e.offsetX > smallpic.offsetWidth || e.clientY - e.offsetY > smallpic.offsetHeight)
smallpic.onmouseout();
} else {
view.style.left = (vX + smallpic.offsetLeft) + 'px';
view.style.top = (vY + smallpic.offsetTop) + 'px';
}
}
function out()
{
var bigbox = document.getElementById("bigbox");
var view = document.getElementById("view");
bigbox.style.display="none";
view.style.display="none";
}
//-->
</script>
<style type="text/css">
<!--
#smallpic{position:relative}
#bigbox{border:1px #c33 solid; overflow:hidden}
#view{border:1px #ddd solid;position:absolute}
//-->
</style>
</head>
<body bgcolor="#999999">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>11</td>
<td height="100">12</td>
<td>13</td>
</tr>
<tr>
<td width="100" height="500" align="right">2123423423
</td>
<td width="500">sdfsdfsd<img id="smallpic" src="a.jpg" border="0" onmousemove="move(event)" onmouseout="out()"></td>
<td width="500">
<div id="bigbox"><img id="bigpic" src="a.jpg" border="0"></div>
<div id="view" onmousemove="move(event)" onmouseout="out()"></div></td>
</tr>
<tr>
<td>31`</td>
<td>32</td>
<td>33</td>
</tr>
</table>
<br /><br /><br /><br />
</body>
</html>
分类:
HTML+CSS+JS
, 其他
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现