JS_javascript 기술을 사용하여 이미지를 확대 및 축소하는 두 가지 간단한 방법

왼쪽 상단 모서리를 고정점으로 잡고 확대하거나 축소하면 이 점의 위치는 변경되지 않습니다.

방법 1:

HTML 코드

코드 복사 코드는 다음과 같습니다. 🎜>

     & LT; 입력 ID = "Btn2" 유형 = "버튼" 값 = "표시" ck = " ImageSuofang(false)" />
                                             oImg',90);"> -->

   
🎜>
Css 코드




코드 복사


코드는 다음과 같습니다.

#biankuang{height: 480px;width:320px;margin: 30px auto;}//고정점이 왼쪽 상단인지 확인하기 위해 테두리를 추가합니다.


이미지 확대 기능을 구현하기 위한 JS 코드는 다음과 같습니다.

Js 코드

코드 복사코드는 다음과 같습니다.

var ZoomLevel = 0;
var currentWidth = 0

var currentHeight = 0; 0;
var originalHeight = 0;
functionini(){
currentWidth = document.myImage.width;
currentHeight = document.myImage.height; originalHeight = currentHeight;

} function ZoomIn(){ document.myImage.width = currentWidth*1.2; document.myImage.height = ZoomLevel = ZoomLevel 1; update(); }

function ZoomOut(){

document.myImage.width = currentWidth/1.2
document.myImage.height/ 1.2;
ZoomLevel = ZoomLevel - 1;
}
function ResetImage(){
document.myImage.width =
document.myImage.height; originalHeight;
ZoomLevel = 0;
}
function update(){
currentWidth = document.myImage.height;
Zoomsize.innerText = ZoomLevel;
imgsize.innerText = currentWidth "X" currentHeight;
html 본문의 코드는 다음과 같습니다.

Html 코드

코드 복사 코드

> //로컬 이미지 소개

< ;input type="button" value="이미지 재설정" onclick="resetImage()">