왼쪽 상단 모서리를 고정점으로 잡고 확대하거나 축소하면 이 점의 위치는 변경되지 않습니다.
방법 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 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 코드