转：js图片放大缩小

最近经常看见有人问怎样放大和缩小图片，我之前也做过一次，下面就把我的方法共享出来。我有2个种方法实现：第一种方法可以兼容IE和火狐(其他的浏览器我没有测试)；第二种方法只能兼容IE。

第一种方法很简单，代码如下：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Image.aspx.cs" Inherits="ImageZoom.Image" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <style type="text/css">  
  9.         img  
  10.         {  
  11.             border:#000000 1px solid;  
  12.         }      
  13.     </style>  
  14.     <script language="javascript" type="text/javascript">  
  15.         //兼容IE和火狐  
  16.         function ImageChange(args) {  
  17.             var oImg = document.getElementById("img1");  
  18.             if (args) {  
  19.                 oImg.width = oImg.width * 1.2;  
  20.                 oImg.height = oImg.height * 1.2;  
  21.             }  
  22.             else {  
  23.                 oImg.width = oImg.width / 1.2;  
  24.                 oImg.height = oImg.height / 1.2;  
  25.             }  
  26.         }      
  27.      </script>  
  28. </head>  
  29. <body>  
  30.     <form id="form1" runat="server">  
  31.     <div>  
  32.         <img id="img1" alt="图片" src="images/img1.gif" mce_src="images/img1.gif"/>  
  33.         <br />  
  34.         <input id="btn1" type="button" value="放大" onclick="ImageChange(true)" />  
  35.         <input id="btn2" type="button" value="缩小" onclick="ImageChange(false)" />  
  36.     </div>  
  37.     </form>  
  38. </body>  
  39. </html>  

 

第二种方法也简单，就是把中间的js方法改变一下，然后给图片框加上 style="zoom:100%;"，如下

  1. var oImg = document.getElementById("img1");  
  2. oImg.style.zoom = parseInt(oImg.style.zoom) + (args ? +20 : -20) + '%'; 
posted @ 2011-11-07 16:12  追_bk  阅读(210)  评论(0)  编辑  收藏  举报