左上隅を固定点としてズームインまたはズームアウトしても、この点の位置は変わりません。 方法 1: HTML コード コードをコピー コードは次のとおりです。 🎜> <br> //IE および Firefox と互換性あり ズームインおよびズームアウト <br> function ImageSuofang(args) { <br> var oImg = document .getElementByid( "oimg"); 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="拡大" onclick="ImageSuofang(true)" /> <br> ImageSuofang(false)" /> <br> oImg',90);" --> 🎜><br> <br></form> 🎜><br>CSS コード<br><br><br><br><br>コードをコピー<br><br><br> コードは次のとおりです:<br><br><br>#biankuang{height: 480px;width:320px;margin: 30px auto;}//境界線を追加して、固定点が左上隅であることを確認します。 <br><br> </div>以下は画像ズームイン機能を実装するための JS コードです: <br><br>Js コード<br><br><br><br><div class="codetitle">コードをコピー<span><a style="CURSOR: pointer" data="12662" class="copybut" id="copybut12662" onclick="doCopy('code12662')"><u>コードは次のとおりです:</u></a></span>var sumLevel = 0; </div>var currentHeight = 0; 0; <div class="codebody" id="code12662">varoriginalHeight = 0; <br>関数initial(){ <br> currentHeight = document.myImage.height; </div>オリジナルの高さ = currentHeight; <br>} <br>functionzoomIn(){ <br> document.myImage.width = currentWidth*1.2; 🎜> ズームレベル = ズームレベル 1; <br> update(); <div class="codetitle">} <span>関数zoomOut(){ <a style="CURSOR: pointer" data="90636" class="copybut" id="copybut90636" onclick="doCopy('code90636')"> document.myImage.width = currentWidth/1.2; <u> document.myImage.height = currentHeight/ 1.2; </u> ズームレベル = ズームレベル - 1; </a> update(); </span>} </div>関数 resetImage(){ <div class="codebody" id="code90636"> document.myImage.width = OriginalWidth = <br> ズームレベル = 0; <br> update(); <br>} <br>関数 update(){ <br> currentWidth = document.myImage.height; <br> ズームサイズ.innerText = ズームレベル; <br> imgsize.innerText = currentWidth "X" currentHeight;<br> HTML 本文のコードは次のとおりです。 <br><br>HTML コード<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="30157" class="copybut" id="copybut30157" onclick="doCopy('code30157')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code30157"> <br><body onload="initial()"> <br><br><div id="biankuang" data-orient="center"> ><img name= "myImage" src="/img/c.jpg" alt="pic"/> //ローカル画像の紹介 <br><br><p> <br><input type="button" value="画像を拡大します" onclick="zoomIn()"> <br><input type="button" value="画像を縮小します" onclick=" zoomOut()"> <br>< ;input type="button" value="画像をリセット" onclick="resetImage()"> <br><span id="zoomsize"></span> <span id="imgsize"> ;</span></p> <br></body></div> </div>