SoFunction
Updated on 2025-03-06

JS method to enlarge and reduce images

This article describes the method of JS to enlarge and reduce image. Share it for your reference, as follows:

Recently I often see people asking how to enlarge and reduce pictures. I have done it once before, so I will share my method below. I have 2 ways to implement it: the first method is compatible with IE and Firefox (I haven't tested other browsers); the second method is compatible with IE.

The first method is very simple, the code is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="" Inherits="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head runat="server">
  <title></title>
  <style type="text/css">
    img
    {
      border:#000000 1px solid;
    }
  </style>
  <script language="JavaScript" type="text/javascript">
    //Compatible with IE and Firefox    function ImageChange(args) {
      var oImg = ("img1");
      if (args) {
         =  * 1.2;
         =  * 1.2;
      }
      else {
         =  / 1.2;
         =  / 1.2;
      }
    }
   </script>
</head>
<body>
  <form  runat="server">
  <div>
    <img  alt="picture" src="images/" mce_src="images/"/>
    <br />
    <input  type="button" value="enlarge" onclick="ImageChange(true)" />
    <input  type="button" value="Shrink" onclick="ImageChange(false)" />
  </div>
  </form>
</body>
</html>

The second method is also simple, which is to change the js method in the middle, and then add style="zoom:100%;" to the image box, as follows

var oImg = ("img1");
 = parseInt() + (args ? +20 : -20) + '%';

For more information about JavaScript, readers who are interested in reading this site's special topic:JavaScript image operation skills》、《Summary of JavaScript's movement effects and techniques》、《Summary of JavaScript switching effects and techniques》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》

I hope this article will be helpful to everyone's JavaScript programming.