자바스크립트 이미지 확대/축소 기능 구현 code_image 특수 효과

JS 소스 코드 보기:

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

// 확대 및 축소 제어
var PhotoSize = {
zoom: 0, // 확대 비율
count: 0, // 확대/축소 횟수
cpu: 0, // 현재 확대/축소 다중 값
elem: "", // 그림 노드
photoWidth: 0, // 그림의 초기 너비 기록
photoHeight: 0, // 그림의 초기 높이 기록

init: function(){
this.elem = document.getElementById("focusphoto");
this.photoWidth = this.elem.scrollWidth;
this.photoHeight = this.elem.scrollHeight; Zoom = 1.2; // 기본 매개변수 설정
this.count = 0;
this.cpu = 1
},

action: function(x){
if( x === 0){
this .cpu = 1;
this.count = 0
}else{
this.count = x; = Math.pow(this.zoom, this.count); // 모든 전원 연산
}
this.elem.style.width = this.photoWidth * this.cpu "px"; .elem.style.height = this.photoHeight * this.cpu "px";
}
}// 확대/축소 효과를 시작하고 첫 번째 클릭이 발생하지 않도록 온로드 모드에서 로드합니다. 이미지의 너비와 높이
window.onload = function(){PhotoSize.init()};


크기를 정확하게 읽을 수 있는 참고용으로 onload 메서드를 사용하는 것이 좋습니다. 초기 이미지

사진 확대 및 축소 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="auther" content="f7"> <title> </title> <input type="button" value="">