Take the upper left corner as the fixed point, zoom in or out, and the position of this point will not change. Method 1: Html code Copy code The code is as follows: <br> //Compatible with IE and Firefox Zoom in and out <br> function ImageSuofang(args) { <br> var oImg = document.getElementById(" oImg"); <br> if (args) { <br> oImgoImg.width = oImg.width * 1.1; <br> oImgoImg.height = oImg.height * 1.1; oImgoImg.width = oImg.width / 1.1; <br> ; <br><br><form id= "form1"> ;"> <br><img id="oImg" src="/img/c.jpg" alt="pic"/> <br></div> <br><br> <input id = "btn1" type = "Button" value = "magnifying" onClick = "ImageSuofang (TRUE)" /& GT; <br> & LT; input ID = "Btn2" Type = "Button" Value = "Show" ck = " ImageSuofang(false)" /> <br> oImg',90);"> --> <br><br> <br></form> 🎜><br>Css code<br><br><br><br><br>Copy code<br><br><br> The code is as follows:</div> <br><br>#biankuang{height: 480px;width:320px;margin: 30px auto;}//Add a border to see that the fixed point is the upper left corner. <br><br> <br>The following is the JS code to implement the image zoom-in function: <br><div class="codetitle">Js code<span><a style="CURSOR: pointer" data="12662" class="copybut" id="copybut12662" onclick="doCopy('code12662')"><u></u></a>Copy code</span> </div> <div class="codebody" id="code12662">The code is as follows:<br><br> </div>var zoomLevel = 0; <br>var currentWidth = 0; <br>var currentHeight = 0; <br>var originalWidth = 0; <br>var originalHeight = 0; <div class="codetitle">function initial(){ <span> currentWidth = document.myImage.width; <a style="CURSOR: pointer" data="90636" class="copybut" id="copybut90636" onclick="doCopy('code90636')"> currentHeight = document.myImage.height; <u> originalWidth = currentWidth; </u> originalHeight = currentHeight; </a> update(); </span>} </div>function zoomIn(){ <div class="codebody" id="code90636"> document.myImage.width = currentWidth*1.2; <br> document.myImage.height = currentHeight*1.2; <br> zoomLevel = zoomLevel 1; <br> update(); <br>} <br>function zoomOut(){ <br> document.myImage.width = currentWidth/1.2; <br> document.myImage.height = currentHeight/1.2; <br> zoomLevel = zoomLevel - 1; <br> update(); <br>} <br>function resetImage(){ <br> document.myImage.width = originalWidth; <br> document.myImage.height = originalHeight; <br> zoomLevel = 0; <br> update(); <br>} <br>function update(){ <br> currentWidth = document.myImage.width; <br> currentHeight = document.myImage.height; <br> zoomsize.innerText = zoomLevel; <br> imgsize.innerText = currentWidth "X" currentHeight; <br>} <br><br><br> The code in the body of html is as follows: <br><br>Html code<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="30157" class="copybut" id="copybut30157" onclick="doCopy('code30157')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code30157"> <br><body onload="initial()"> <br><br><div id="biankuang" data-orient="center"> <br><img name= "myImage" src="/img/c.jpg" alt="pic"/> //Introducing local images <br></div> <br><br><p> <br><input type="button" value="Zoom in the picture" onclick="zoomIn()"> <br><input type="button" value="Zoom out the picture" onclick="zoomOut()"> <br>< ;input type="button" value="Reset Image" onclick="resetImage()"> <br><span id="zoomsize"></span> <span id="imgsize"> ;</span></p> <br></body> <br> </div> </div>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
