<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<title>标本资料</title>
<script language="javascript">
var iDivHeight = 250; //放大显示区域宽度
var iDivWidth = 250;//放大显示区域高度
var iMultiple = 4; //放大倍数
//显示放大图,鼠标移动事件和鼠标点击事件都会调用本事件
//参数:src代表缩略图,sFileName放大图片名称
//原理:依据鼠标对应缩略图左上角(0,0)上的位置控制放大图左上角对应显示区域左上角(0,0)的位置
function show(src, sFileName)
{
var iPosX, iPosY; //放大图对应显示区域左上角的坐标
var iMouseX = event.offsetX; //鼠标对应缩略图左上角的横坐标
var iMouseY = event.offsetY; //鼠标对应缩略图左上角的纵坐标
var iBigImgWidth = src.clientWidth * iMultiple; //放大图宽度,是缩略图的宽度乘以放大倍数
var iBigImgHeight = src.clientHeight * iMultiple; //放大图高度,是缩略图的高度乘以放大倍数
if (iBigImgWidth <= iDivWidth)
{
iPosX = (iDivWidth - iBigImgWidth) / 2;
}
else
{
if ((iMouseX * iMultiple) <= (iDivWidth / 2))
{
iPosX = 0;
}
else
{
if (((src.clientWidth - iMouseX) * iMultiple) <= (iDivWidth / 2))
{
iPosX = -(iBigImgWidth - iDivWidth);
}
else
{
iPosX = -(iMouseX * iMultiple - iDivWidth / 2);
}
}
}
if (iBigImgHeight <= iDivHeight)
{
iPosY = (iDivHeight - iBigImgHeight) / 2;
}
else
{
if ((iMouseY * iMultiple) <= (iDivHeight / 2))
{
iPosY = 0;
}
else
{
if (((src.clientHeight - iMouseY) * iMultiple) <= (iDivHeight / 2))
{
iPosY = -(iBigImgHeight - iDivHeight);
}
else
{
iPosY = -(iMouseY * iMultiple - iDivHeight / 2);
}
}
}
div1.style.height = iDivHeight;
div1.style.width = iDivWidth;
if (div1.innerHTML == "")
{
div1.innerHTML = "<img id=BigImg style='position:relative'>";
BigImg.src = "http://biomuseum.zsu.edu.cn/ASP/search/hexapod/big_pic/" + sFileName;
}
BigImg.width = iBigImgWidth;
BigImg.height = iBigImgHeight;
BigImg.style.top = iPosY;
BigImg.style.left = iPosX;
}
</script>
</head>
<body>
<p></p>
<table cellspacing="0" cellpadding="1" width="727" align="center" border="0">
<tr>
<td align="middle">
<table bordercolor="#000000" height="301" cellspacing="0" cellpadding="0" width="302" bgcolor="#deffde" border="1">
<tr>
<td align="middle">
<img onmousemove="show(this, 'B-000002.jpg')" onmousedown="show(this, 'B-000002.jpg')" id="imgSource" src="http://biomuseum.zsu.edu.cn/ASP/search/hexapod/small_pic/B-000002.jpg">
</td>
</tr>
</table>
</td>
<td style="WIDTH: 15px" width="15"></td>
<td align="middle">
<table bordercolor="#000000" height="301" cellspacing="0" cellpadding="0" width="302" bgcolor="#deffde" border="1">
<tr>
<td align="middle"><a href="01/B-000002.jpg" target="_blank">打开原图</a>
<div id="div1" style="OVERFLOW: hidden">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p></p>
</body>
</html>
----------------------------------------------------------------
网上找的图片局部放大的,小改了一下!有个问题,大家帮看看,
如果想左边图出现一个小方框,随着鼠标移动,右边显示这个小方框等比例放大的部分!如何实现?
先谢了!
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<title>标本资料</title>
<script language="javascript">
var iDivHeight = 250; //放大显示区域宽度
var iDivWidth = 250;//放大显示区域高度
var iMultiple = 4; //放大倍数
//显示放大图,鼠标移动事件和鼠标点击事件都会调用本事件
//参数:src代表缩略图,sFileName放大图片名称
//原理:依据鼠标对应缩略图左上角(0,0)上的位置控制放大图左上角对应显示区域左上角(0,0)的位置
function show(src, sFileName)
{
var iPosX, iPosY; //放大图对应显示区域左上角的坐标
var iMouseX = event.offsetX; //鼠标对应缩略图左上角的横坐标
var iMouseY = event.offsetY; //鼠标对应缩略图左上角的纵坐标
var iBigImgWidth = src.clientWidth * iMultiple; //放大图宽度,是缩略图的宽度乘以放大倍数
var iBigImgHeight = src.clientHeight * iMultiple; //放大图高度,是缩略图的高度乘以放大倍数
if (iBigImgWidth <= iDivWidth)
{
iPosX = (iDivWidth - iBigImgWidth) / 2;
}
else
{
if ((iMouseX * iMultiple) <= (iDivWidth / 2))
{
iPosX = 0;
}
else
{
if (((src.clientWidth - iMouseX) * iMultiple) <= (iDivWidth / 2))
{
iPosX = -(iBigImgWidth - iDivWidth);
}
else
{
iPosX = -(iMouseX * iMultiple - iDivWidth / 2);
}
}
}
if (iBigImgHeight <= iDivHeight)
{
iPosY = (iDivHeight - iBigImgHeight) / 2;
}
else
{
if ((iMouseY * iMultiple) <= (iDivHeight / 2))
{
iPosY = 0;
}
else
{
if (((src.clientHeight - iMouseY) * iMultiple) <= (iDivHeight / 2))
{
iPosY = -(iBigImgHeight - iDivHeight);
}
else
{
iPosY = -(iMouseY * iMultiple - iDivHeight / 2);
}
}
}
div1.style.height = iDivHeight;
div1.style.width = iDivWidth;
if (div1.innerHTML == "")
{
div1.innerHTML = "<img id=BigImg style='position:relative'>";
BigImg.src = "http://biomuseum.zsu.edu.cn/ASP/search/hexapod/big_pic/" + sFileName;
}
BigImg.width = iBigImgWidth;
BigImg.height = iBigImgHeight;
BigImg.style.top = iPosY;
BigImg.style.left = iPosX;
}
</script>
</head>
<body>
<p></p>
<table cellspacing="0" cellpadding="1" width="727" align="center" border="0">
<tr>
<td align="middle">
<table bordercolor="#000000" height="301" cellspacing="0" cellpadding="0" width="302" bgcolor="#deffde" border="1">
<tr>
<td align="middle">
<img onmousemove="show(this, 'B-000002.jpg')" onmousedown="show(this, 'B-000002.jpg')" id="imgSource" src="http://biomuseum.zsu.edu.cn/ASP/search/hexapod/small_pic/B-000002.jpg">
</td>
</tr>
</table>
</td>
<td style="WIDTH: 15px" width="15"></td>
<td align="middle">
<table bordercolor="#000000" height="301" cellspacing="0" cellpadding="0" width="302" bgcolor="#deffde" border="1">
<tr>
<td align="middle"><a href="01/B-000002.jpg" target="_blank">打开原图</a>
<div id="div1" style="OVERFLOW: hidden">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p></p>
</body>
</html>
----------------------------------------------------------------
网上找的图片局部放大的,小改了一下!有个问题,大家帮看看,
如果想左边图出现一个小方框,随着鼠标移动,右边显示这个小方框等比例放大的部分!如何实现?
先谢了!
解决方案 »
- javascript如何得到url的返回值?
- 感谢fosjos
- 如何自动计算框中的值
- 每次加载SSH工程的时候总会加载上asm-2.2.3.jar这个包,删掉了也不行,该怎么办呢?
- javascript连接数据库的问题
- Ext4.2 Grouped Header Grid 请教
- 高分求教 ~简单文本框失去焦点~ 问题,在线等
- 如何防止查看网页源文件,在线等,得到正确答案即结帐,急,谢谢!
- 有没有Netscape的Javascript和Microsoft的Js语法区别的对照表?
- 关于list/menu组件的使用方法
- 使用openlayers进行GIS地图制作中,经过那些处理可以是网站速度加快啊??
- 关于IFRAME关闭后 清除其使用的浏览器资源问题 兄弟真的好急!!!!!!
<html>
<head>
<meta name= "GENERATOR " content= "Microsoft FrontPage 6.0 ">
<title> 标本资料 </title>
<script language= "javascript">
var iDivHeight = 250; //放大显示区域宽度
var iDivWidth = 250; //放大显示区域高度
var iMultiple = 4; //放大倍数
//显示放大图,鼠标移动事件和鼠标点击事件都会调用本事件
//参数:src代表缩略图,sFileName放大图片名称
//原理:依据鼠标对应缩略图左上角(0,0)上的位置控制放大图左上角对应显示区域左上角(0,0)的位置
function show(src, sFileName) {
var event = window.event ? window.event : show.caller.arguments[0];
var iPosX, iPosY; //放大图对应显示区域左上角的坐标
var iMouseX = event.offsetX; //鼠标对应缩略图左上角的横坐标
var iMouseY = event.offsetY; //鼠标对应缩略图左上角的纵坐标
var iBigImgWidth = src.clientWidth * iMultiple; //放大图宽度,是缩略图的宽度乘以放大倍数
var iBigImgHeight = src.clientHeight * iMultiple; //放大图高度,是缩略图的高度乘以放大倍数 if (iBigImgWidth <= iDivWidth) {
iPosX = (iDivWidth - iBigImgWidth) / 2;
} else {
if ((iMouseX * iMultiple) <= (iDivWidth / 2)) {
iPosX = 0;
} else {
if (((src.clientWidth - iMouseX) * iMultiple) <= (iDivWidth / 2)) {
iPosX = -(iBigImgWidth - iDivWidth);
} else {
iPosX = -(iMouseX * iMultiple - iDivWidth / 2);
}
}
} if (iBigImgHeight <= iDivHeight) {
iPosY = (iDivHeight - iBigImgHeight) / 2;
} else {
if ((iMouseY * iMultiple) <= (iDivHeight / 2)) {
iPosY = 0;
} else {
if (((src.clientHeight - iMouseY) * iMultiple) <= (iDivHeight / 2)) {
iPosY = -(iBigImgHeight - iDivHeight);
} else {
iPosY = -(iMouseY * iMultiple - iDivHeight / 2);
}
}
}
var oshowdiv = document.getElementById('showdiv');
oshowdiv.style.height = iDivHeight;
oshowdiv.style.width = iDivWidth;
if (oshowdiv.innerHTML == "") {
oshowdiv.innerHTML = "<img id=bigimg style='position:relative'>";
document.getElementById('bigimg').src = "http://biomuseum.zsu.edu.cn/ASP/search/hexapod/big_pic/" + sFileName;
}
var obigimg = document.getElementById('bigimg');
obigimg.width = iBigImgWidth;
obigimg.height = iBigImgHeight;
obigimg.style.top = iPosY;
obigimg.style.left = iPosX;
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="1" width="727" align="center" border="0">
<tr><td align= "middle ">
<table bordercolor= "#000000 " height= "301 " cellspacing="0" cellpadding="0" width="302" bgcolor="#deffde" border="1">
<tr><td align= "middle ">
<img onmousemove="show(this, 'B-000002.jpg')" onmousedown="show(this, 'B-000002.jpg')" id="imgSource" src="http://biomuseum.zsu.edu.cn/ASP/search/hexapod/small_pic/B-000002.jpg">
</td></tr>
</table>
</td><td style="width:15px" width="15"></td><td align="middle">
<table bordercolor="#000000" height="301" cellspacing="0" cellpadding="0" width="302" bgcolor="#deffde" border="1">
<tr><td align="middle">
<a href="01/B-000002.jpg" target="_blank">打开原图</a>
<div id="showdiv" style="OVERFLOW: hidden"></div>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>原来的代码有报错,调试了一下,不过还是只在 ie 下好用,firefox 下虽然不报错了但还是不好用啊!
楼主【lnnu_jxxy】截止到2008-07-03 13:36:30的历史汇总数据(不包括此帖):
发帖的总数量:7 发帖的总分数:240
结贴的总数量:2 结贴的总分数:80
无满意结贴数:0 无满意结贴分:0
未结的帖子数:5 未结的总分数:160
结贴的百分比:28.57 % 结分的百分比:33.33 %
无满意结贴率:0.00 % 无满意结分率:0.00 %
楼主该结一些帖子了