现在的位置: 首页 > 综合 > 正文

可局部放大图片的例子，局部放大图片，javascript局部放大图片

2013年01月12日 ⁄ 综合 ⁄ 共 5628字 ⁄ 字号 小 中 大 ⁄ 评论关闭

关键字: 可局部放大图片 局部放大图片 javascript局部放大图片

因为功能上的需要，要局部放大页面上的图片，以看清图片中不清楚的位置

代码复制到.jsp或.html文件里执行就可看到效果

一、这个局部放大只能通过改代码才能实现图片放大的倍率，但是速度很好，鼠标在图片上动放大的图片及时显示，在下面我再发一个可通过鼠标点击图片放大缩小局部放大图片的效果的代码，但速度没有这个快

Html代码 复制代码
  1. <html>  
  2. <head>  
  3. <title>emu</title>  
  4. </head>  
  5. <body>  
  6. <BR>  
  7. 原图：<BR>  
  8. <img src="http://reimg.360quan.com/400/300/album/album.static.360quan.com/019/731/51/200711091844017907.jpg"    
  9.   
  10. onmousemove='zoom()' id=srcImg>  
  11. <BR>  
  12. 局部放大图：<BR>  
  13. <div style='overflow:hidden'><img id=zoomImg></div>  
  14.   
  15. <script language="javascript" type="text/javascript">  
  16. <!--   
  17. zoomImg.src = srcImg.src;   
  18. srcImgsrcImg.height = srcImg.height;   
  19. var zoomRate = 5;   
  20. zoomImg.height = srcImg.height*zoomRate;   
  21. zoomImg.parentNode.style.width = srcImg.width;   
  22. zoomImg.parentNode.style.height = srcImg.height;   
  23. function zoom(){   
  24. var elm = event.srcElement;   
  25. h = elm.offsetHeight/zoomRate/2;   
  26. w = elm.offsetWidth/zoomRate/2;   
  27. var x = event.x-elm.offsetLeft;   
  28. xx=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;   
  29. zoomImg.style.marginLeft=(w-x)*zoomRate;   
  30. var y = event.y-elm.offsetTop;   
  31. yy=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;   
  32. zoomImg.style.marginTop=(h-y)*zoomRate;   
  33. }   
  34. //-->  
  35. </script>  
  36. </body>  
  37. </html>  
<html>
<head>
<title>emu</title>
</head>
<body>
<BR>
原图：<BR>
<img src="http://reimg.360quan.com/400/300/album/album.static.360quan.com/019/731/51/200711091844017907.jpg" 

onmousemove='zoom()' id=srcImg>
<BR>
局部放大图：<BR>
<div style='overflow:hidden'><img id=zoomImg></div>

<script language="javascript" type="text/javascript">
<!--
zoomImg.src = srcImg.src;
srcImg.height = srcImg.height;
var zoomRate = 5;
zoomImg.height = srcImg.height*zoomRate;
zoomImg.parentNode.style.width = srcImg.width;
zoomImg.parentNode.style.height = srcImg.height;
function zoom(){
var elm = event.srcElement;
h = elm.offsetHeight/zoomRate/2;
w = elm.offsetWidth/zoomRate/2;
var x = event.x-elm.offsetLeft;
x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;
zoomImg.style.marginLeft=(w-x)*zoomRate;
var y = event.y-elm.offsetTop;
y=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;
zoomImg.style.marginTop=(h-y)*zoomRate;
}
//-->
</script>
</body>
</html>

 二、这个可通过鼠标点击图片放大缩小局部放大的图片的效果的代码，但速度稍微慢点

Html代码 复制代码
  1. <html>  
  2.      
  3.   <head>  
  4.   <meta name="GENERATOR" content="Microsoft FrontPage 6.0">  
  5.   <title>标本资料</title>  
  6.   <script language="javascript">  
  7.      
  8.   var iDivHeight = 250;   
  9.   var iDivWidth = 250;   
  10.  var iMultiple = 8;      
  11.     
  12.  function show(src, sFileName)   
  13.  {   
  14.      if ((event.button == 1) && (event.ctrlKey == true))   
  15.          iMultiple -= 1;   
  16.      else   
  17.          if (event.button == 1)   
  18.              iMultiple += 1;   
  19.      if (iMultiple < 2) iMultiple = 2;   
  20.         
  21.      if (iMultiple > 14) iMultiple = 14;   
  22.                 
  23.      var iPosX, iPosY;       
  24.      var iMouseX = event.offsetX;      
  25.      var iMouseY = event.offsetY;      
  26.      var iBigImgWidth = src.clientWidth * iMultiple;         
  27.      var iBigImgHeight = src.clientHeight * iMultiple;      
  28.         
  29.      if (iBigImgWidth <= iDivWidth)   
  30.      {   
  31.          iPosX = (iDivWidth - iBigImgWidth) / 2;   
  32.      }   
  33.      else   
  34.      {   
  35.          if ((iMouseX * iMultiple) <= (iDivWidth / 2))   
  36.          {   
  37.              iPosX = 0;   
  38.          }   
  39.          else   
  40.          {   
  41.              if (((src.clientWidth - iMouseX) * iMultiple) <= (iDivWidth / 2))   
  42.              {   
  43.                  iPosX = -(iBigImgWidth - iDivWidth);   
  44.              }   
  45.              else   
  46.              {   
  47.                  iPosX = -(iMouseX * iMultiple - iDivWidth / 2);   
  48.              }   
  49.          }   
  50.      }   
  51.         
  52.      if (iBigImgHeight <= iDivHeight)   
  53.      {   
  54.          iPosY = (iDivHeight - iBigImgHeight) / 2;   
  55.      }   
  56.      else   
  57.      {   
  58.          if ((iMouseY * iMultiple) <= (iDivHeight / 2))   
  59.          {   
  60.              iPosY = 0;   
  61.          }   
  62.          else   
  63.          {   
  64.              if (((src.clientHeight - iMouseY) * iMultiple) <= (iDivHeight / 2))   
  65.              {   
  66.                  iPosY = -(iBigImgHeight - iDivHeight);   
  67.              }   
  68.              else   
  69.              {   
  70.                  iPosY = -(iMouseY * iMultiple - iDivHeight / 2);   
  71.              }   
  72.          }   
  73.      }   
  74.      div1.style.height = iDivHeight;   
  75.      div1.style.width = iDivWidth;   
  76.      if (div1.innerHTML == "")   
  77.      {   
  78.          div1.innerHTML = "<img id=BigImg style='position:relative'>";   
  79.          BigImg.src = "http://biomuseum.zsu.edu.cn/ASP/search/hexapod/big_pic/" + sFileName;   
  80.      }   
  81.      BigImg.width = iBigImgWidth;   
  82.      BigImg.height = iBigImgHeight;   
  83.      BigImg.style.top = iPosY;   
  84.      BigImg.style.left = iPosX;   
  85.  }   
  86.     
  87.  </script>  
  88.  </head>  
  89.     
  90.  <body>  
  91.     
  92.  <p></p>  
  93.  <table cellspacing="0" cellpadding="1" width="727" align="center" border="0">  
  94.      <tr>  
  95.          <td align="middle">  
  96.         <table bordercolor="#000000" height="301" cellspacing="0" cellpadding="0" width="302" bgcolor="#deffde" border="1">  
  97.             <tr>  
  98.                 <td align="middle">  
  99.                 <marquee scrolldelay="120" width="80%"><font size="2">将鼠标移入标本图中，右方显示局部放大图；单击鼠标左键，可以增大放大倍数；鼠标单击时同时按Ctrl键则减小放大倍数。</font></marquee><br>  
  100.                 <img onmousemove="show(this, 'B-000002.jpg')" onmousedown="show(this, 'B-000002.jpg')" id="imgSource" src="01/B-000002.jpg">  
  101.                 </td>  
  102.             </tr>  
  103.         </table>  
  104.         </td>  
  105.         <td style="WIDTH: 15px" width="15"></td>  
  106.         <td align="middle">  
  107.         <table bordercolor="#000000" height="301" cellspacing="0" cellpadding="0" width="302" bgcolor="#deffde" border="1">  
  108.             <tr>  
  109.                 <td align="middle"><a href="01/B-000002.jpg" target="_blank">打开原图</a>  
  110.                 <div id="div1" style="OVERFLOW: hidden">  
  111.                 </div>  
  112.                 </td>  
  113.             </tr>  
  114.         </table>  
  115.         </td>  
  116.     </tr>  
  117. </table>  
  118. <p></p>  
  119.   
  120. </body>  
  121.   
  122. </html>  
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞