Thu phóng hình ảnh JavaScript onclick

Tìm hiểu cách tạo thu phóng hình ảnh

Nội dung chính Show

Làm cách nào để phóng to hình ảnh khi nhấp vào JavaScript?
Làm cách nào để phóng to hình ảnh trong JavaScript?
Làm cách nào để phóng to video trong JavaScript?
Làm cách nào để đặt mức thu phóng của trình duyệt bằng JavaScript?

Di chuột qua hình ảnh

Xem trước thu phóng

Tự mình thử »

Bước 1) Thêm HTML

Thí dụ

Bước 2) Thêm CSS

Vùng chứa phải có định vị "tương đối"

Thí dụ

* {kích thước hộp. hộp viền;}

img-zoom-container {
Chức vụ. liên quan đến;
}

img-zoom-ống kính {
Chức vụ. tuyệt đối;
biên giới. 1px cố định #d4d4d4;
/* thiết lập kích thước của ống kính. */
bề rộng. 40px;
chiều cao. 40px;
}

img-zoom-kết quả {
biên giới. 1px cố định #d4d4d4;
/*thiết lập kích thước của div kết quả. */
bề rộng. 300px;
chiều cao. 300px;
}

Bước 3) Thêm JavaScript

Thí dụ

chức năng imageZoom(imgID, resultID) {
var img, ống kính, kết quả, cx, cy;
img = tài liệu. getElementById(imgID);
kết quả = tài liệu. getElementById(ID kết quả);
/* Tạo ống kính. */
ống kính = tài liệu. createElement("DIV");
thấu kính. setAttribute("class", "img-zoom-lens");
/* Chèn thấu kính. */
hình ảnh. phần tử cha mẹ. insertB Before(ống kính, img);
/* Tính tỷ lệ giữa kết quả DIV và ống kính. */
cx = kết quả. offsetWidth / ống kính. offsetChiều rộng;
cy = kết quả. offsetChiều cao / ống kính. offsetChiều cao;
/* Đặt thuộc tính nền cho kết quả DIV */
kết quả. Phong cách. backgroundImage = "url('" + img. src + "')";
kết quả. Phong cách. kích thước nền = (img. chiều rộng * cx) + "px" + (img. chiều cao * cy) + "px";
/* Thực hiện một chức năng khi ai đó di chuyển con trỏ qua hình ảnh hoặc ống kính. */
thấu kính. addEventListener("mousemove", moveLens);
hình ảnh. addEventListener("mousemove", moveLens);
/* Và cả cho màn hình cảm ứng. */
thấu kính. addEventListener("touchmove", moveLens);
hình ảnh. addEventListener("touchmove", moveLens);
hàm moveLens(e) {
vị trí var, x, y;
/* Ngăn chặn bất kỳ hành động nào khác có thể xảy ra khi di chuyển qua hình ảnh */
e. ngăn chặn Mặc định();
/* Lấy vị trí x và y của con trỏ. */
pos = getCursorPos(e);
/* Tính toán vị trí của thấu kính. */
x = vị trí. x - (thấu kính. offsetWidth/2);
y = vị trí. y - (thấu kính. offsetHeight/2);
/* Ngăn ống kính nằm ngoài hình ảnh. */
nếu (x > img. chiều rộng - ống kính. offsetWidth) {x = img. chiều rộng - ống kính. offsetWidth;}
nếu (x < 0) {x = 0;}
nếu (y > img. chiều cao - ống kính. offsetHeight) {y = img. chiều cao - ống kính. offsetHeight;}
nếu (y < 0) {y = 0;}
/* Đặt vị trí của ống kính. */
thấu kính. Phong cách. trái = x + "px";
thấu kính. Phong cách. top = y + "px";
/* Hiển thị những gì ống kính "nhìn thấy". */
kết quả. Phong cách. backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
hàm getCursorPos(e) {
var a, x = 0, y = 0;
e = e. cửa sổ. biến cố;
/* Lấy vị trí x và y của ảnh. */
một = hình ảnh. getBoundingClientRect();
/* Tính tọa độ x và y của con trỏ, tương ứng với hình ảnh. */
x = e. trangX - a. bên trái;
y = e. trangY - một. đứng đầu;
/* Cân nhắc việc cuộn trang bất kỳ. */
x = x - cửa sổ. trangXOffset;
y = y - cửa sổ. trangYOffset;
trả về {x. x, y. y};
}
}

Bước 4) Bắt đầu hiệu ứng thu phóng

Đưa ra một hình ảnh và nhiệm vụ là tăng và giảm kích thước hình ảnh bằng JavaScript. Sử dụng thuộc tính sau để tăng và giảm hình ảnh

Sử dụng thuộc tính Chiều rộng. Nó được sử dụng để thay đổi các giá trị mới để thay đổi kích thước chiều rộng của phần tử

cú pháp

object.style.width = "auto|length|%|initial|inherit"

Tiếp cận

Lấy bộ chọn của hình ảnh được yêu cầu bằng cách sử dụng. getElementById(bộ chọn)
Lưu trữ giá trị chiều rộng hiện tại trong biến bằng cách sử dụng. khách hàngChiều rộng
Bây giờ thay đổi giá trị chiều rộng thành mới bằng cách sử dụng. Phong cách. bề rộng
Nó sẽ tăng và giảm kích thước của hình ảnh theo tỷ lệ

Thí dụ

<!DOCTYPE html>

<html>

<head>

object.style.height = "auto|length|%|initial|inherit"

0<

object.style.height = "auto|length|%|initial|inherit"

2>

object.style.height = "auto|length|%|initial|inherit"

4_______1_______5

object.style.height = "auto|length|%|initial|inherit"

4_______1_______7

object.style.height = "auto|length|%|initial|inherit"

object.style.height = "auto|length|%|initial|inherit"

object.style.height = "auto|length|%|initial|inherit"

2>

<!DOCTYPE html>2

object.style.height = "auto|length|%|initial|inherit"

0<<!DOCTYPE html>5 <!DOCTYPE html>6<!DOCTYPE html>7

<!DOCTYPE html>8>

object.style.height = "auto|length|%|initial|inherit"

object.style.height = "auto|length|%|initial|inherit"

9<!DOCTYPE html>5>

object.style.height = "auto|length|%|initial|inherit"

9head>

<<9 html0<!DOCTYPE html>7html2>

<!DOCTYPE html>2

object.style.height = "auto|length|%|initial|inherit"

0<html7 html0 <!DOCTYPE html>7>0 >1

object.style.height = "auto|length|%|initial|inherit"

4_______38_______3

object.style.height = "auto|length|%|initial|inherit"

object.style.height = "auto|length|%|initial|inherit"

9html7>1

<!DOCTYPE html>2

object.style.height = "auto|length|%|initial|inherit"

0< 1>

object.style.height = "auto|length|%|initial|inherit"

4_______39_______4

object.style.height = "auto|length|%|initial|inherit"

4_______39_______6

object.style.height = "auto|length|%|initial|inherit"

object.style.height = "auto|length|%|initial|inherit"

9 1>

object.style.height = "auto|length|%|initial|inherit"

0<<3>

<!DOCTYPE html>2

object.style.height = "auto|length|%|initial|inherit"

0<<8 <9<!DOCTYPE html>7head1>

head3

object.style.height = "auto|length|%|initial|inherit"

4_______36_______head6 <!DOCTYPE html>6<!DOCTYPE html>7

head9

>0>1<!DOCTYPE html>7>3 >4<!DOCTYPE html>7>6 >7<!DOCTYPE html>7>9>

object.style.height = "auto|length|%|initial|inherit"

object.style.height = "auto|length|%|initial|inherit"

9<8>

object.style.height = "auto|length|%|initial|inherit"

0<<3>

<!DOCTYPE html>2

object.style.height = "auto|length|%|initial|inherit"

0<___

object.style.height = "auto|length|%|initial|inherit"

object.style.height = "auto|length|%|initial|inherit"

13<!DOCTYPE html>7

object.style.height = "auto|length|%|initial|inherit"

object.style.height = "auto|length|%|initial|inherit"

16<!DOCTYPE html>7

object.style.height = "auto|length|%|initial|inherit"

35>1

Làm cách nào để phóng to hình ảnh khi nhấp vào JavaScript?

Lấy bộ chọn của hình ảnh được yêu cầu bằng cách sử dụng. getElementById(bộ chọn)

Lưu trữ giá trị chiều rộng hiện tại trong biến bằng cách sử dụng. khách hàngChiều rộng

Bây giờ thay đổi giá trị chiều rộng thành mới bằng cách sử dụng. Phong cách. bề rộng

Nó sẽ tăng và giảm kích thước của hình ảnh theo tỷ lệ

Làm cách nào để phóng to hình ảnh trong JavaScript?

Để phóng to và thu nhỏ hình ảnh trong JavaScript, bạn cần phải thay đổi thuộc tính chiều rộng và chiều cao của thành phần img hoặc bạn cần sử dụng biến đổi. tỷ lệ () . Cách dễ nhất để làm điều này là áp dụng một lớp cho phần tử bằng JavaScript. Điều này có thể xảy ra khi nhấp hoặc khi di chuột.

Làm cách nào để phóng to video trong JavaScript?

Vùng chứa onMouseOver="do_VidZoom()" để thực hiện hiệu ứng thu phóng. Kích thước video được tăng lên nhưng nó vẫn chỉ hiển thị bên trong lề của hình chữ nhật (giống như một cửa sổ).