一个图片局部放大镜

最新推荐文章于 2021-01-03 15:57:42 发布

Triumph

最新推荐文章于 2021-01-03 15:57:42 发布

阅读量2.6k

点赞数

分类专栏： JavaScript 文章标签： border microsoft div generator table javascript

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

转自无忧脚本

<html>

var iDivHeight = 250; //放大显示区域宽度
var iDivWidth = 250;//放大显示区域高度
var iMultiple = 8; //放大倍数

//显示放大图，鼠标移动事件和鼠标点击事件都会调用本事件
//参数：src代表缩略图，sFileName放大图片名称
//原理：依据鼠标对应缩略图左上角（0，0）上的位置控制放大图左上角对应显示区域左上角（0，0）的位置
function show(src, sFileName)
{
//判断鼠标事件产生时是否同时按下了
if ((event.button == 1) && (event.ctrlKey == true))
  iMultiple -= 1;
else
  if (event.button == 1)
   iMultiple += 1;
if (iMultiple < 2) iMultiple = 2;

if (iMultiple > 14) iMultiple = 14;

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">
    <marquee scrolldelay="120" width="80%"><font size="2">将鼠标移入标本图中，右方显示局部放大图；单击鼠标左键，可以增大放大倍数；鼠标单击时同时按Ctrl键则减小放大倍数。</font></marquee><br>
    <img οnmοusemοve="show(this, 'B-000002.jpg')" οnmοusedοwn="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>