图片放大镜javascript实现
2008-08-19 16:28
501 查看
<!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>
<style type="text/css">
#smallpic{position:relative}
#bigbox{border:1px #c33 solid; overflow:hidden}
#view{border:1px #ddd solid;position:absolute}
</style>
<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>
</head>
<body>
<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"><img id="smallpic" src="http://desk.blueidea.com/DESK/XP/Vista_green_3/Vista_green_3020.jpg" border="0" onmousemove="move(event)" onmouseout="out()"></td>
<td width="500">
<div id="bigbox"><img id="bigpic" src="http://desk.blueidea.com/DESK/XP/Vista_green_3/Vista_green_3020.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>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片放大镜的js实现</title>
<style type="text/css">
#smallpic{position:relative}
#bigbox{border:1px #c33 solid; overflow:hidden}
#view{border:1px #ddd solid;position:absolute}
</style>
<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>
</head>
<body>
<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"><img id="smallpic" src="http://desk.blueidea.com/DESK/XP/Vista_green_3/Vista_green_3020.jpg" border="0" onmousemove="move(event)" onmouseout="out()"></td>
<td width="500">
<div id="bigbox"><img id="bigpic" src="http://desk.blueidea.com/DESK/XP/Vista_green_3/Vista_green_3020.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>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript实现的放大镜放大图片效果
- JavaScript图片放大技术(放大镜)实现代码分享
- jQuery插件Magnify放大镜实现javascript图片放大功能
- 利用javascript实现的三种图片放大镜效果实例（附源码）
- javascript 实现图片放大镜功能
- 原生javascript实现图片放大镜效果
- 原生javascript实现图片放大镜效果
- javascript实现图片放大镜效果
- 分别用javascript，jquery实现 对图片的放大镜效果
- Javascript实现图片的放大镜功能效果
- 【荐】JavaScript+CSS技术实现能覆盖SELECT的图片放大（放大镜）示例代码
- JavaScript图片放大技术(放大镜)实现代码分享
- javascript实现图片放大与缩小
- javascript实现滚动图片
- PHP+JavaScript 实现图片无刷新上传
- JavaScript实现文字与图片拖拽效果的方法
- 用 JavaScript 实现网页图片等比例缩放
- 利用javascript从数据库取数据来实现CSDN首页图片的切换效果
- javascript实现鼠标划过出现舞动的图片
- JavaScript+html5 canvas实现图片破碎重组动画特效