JS怎么实现图片放大缩小的方法

这篇文章主要介绍了JS怎么实现图片放大缩小的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联服务项目包括秦都网站建设、秦都网站制作、秦都网页制作以及秦都网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，秦都网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到秦都省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

本文实例讲述了JS实现图片放大缩小的方法。分享给大家供大家参考，具体如下：

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

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Image.aspx.cs" Inherits="ImageZoom.Image" %>



  
  
    img
    {
      border:#000000 1px solid;
    }
  
  
    //兼容IE和火狐
    function ImageChange(args) {
      var oImg = document.getElementById("img1");
      if (args) {
        oImg.width = oImg.width * 1.2;
        oImg.height = oImg.height * 1.2;
      }
      else {
        oImg.width = oImg.width / 1.2;
        oImg.height = oImg.height / 1.2;
      }
    }
   


  
  

    
    
    
    
  
  

第二种方法也简单，就是把中间的js方法改变一下，然后给图片框加上 ，如下

var oImg = document.getElementById("img1");
oImg.style.zoom = parseInt(oImg.style.zoom) + (args ? +20 : -20) + '%';

感谢你能够认真阅读完这篇文章，希望小编分享的“JS怎么实现图片放大缩小的方法”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!