Làm cách nào để phóng to và thu nhỏ trong JavaScript?

Ở đây chúng tôi đang cung cấp cho bạn một ví dụ để hiển thị hiệu ứng hình ảnh. Với mục đích này, chúng tôi đã tạo ra ba chức năng. Hàm zoomImage() và zoom() đặt chiều cao và chiều rộng của hình ảnh và làm cho nó hiển thị hiệu ứng Phóng to và Thu nhỏ. Hàm stopZoom() cung cấp chức năng dừng hiệu ứng hình ảnh bằng cách sử dụng phương thức clearInterval(). Ở đây chúng tôi đã sử dụng các sự kiện Mouseover và Mouseout để phóng to và thu nhỏ hình ảnh. Miễn là bạn đặt con trỏ vào liên kết Phóng to, kích thước của hình ảnh sẽ bắt đầu tăng lên và nếu bạn đặt con trỏ vào liên kết Thu nhỏ. , kích thước của hình ảnh sẽ bắt đầu giảm

Đây là mã

Zoom in and Zoom out

Hiệu ứng thu nhỏ

Phóng to hiệu ứng

Tải xuống mã nguồn

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

Di chuột qua hình ảnh

Xem trước thu phóng

Tự mình thử »

Bước 1) Thêm HTML

Ví dụ

Bước 2) Thêm CSS

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

Ví dụ

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

.img-zoom-container {
  vị trí. họ hàng;
}

.img-zoom-lens {
  vị trí. tuyệt đối;
  đường viền. 1px solid #d4d4d4;
  /*đặt kích thước ống kính. */
  chiều rộng. 40px;
  chiều cao. 40px;
}

.img-zoom-result {
  đường viền. 1px solid #d4d4d4;
  /*đặt kích thước của div kết quả. */
  chiều rộng. 300px;
  chiều cao. 300px;
}

Bước 3) Thêm JavaScript

Ví dụ

function imageZoom(imgID, resultID) {
  var img, lens, result, cx, cy;
  img = tài liệu. getElementById(imgID);
  result = document. getElementById(resultID);
  /* Tạo ống kính. */
  ống kính = tài liệu. createElement("DIV");
  ống kính. setAttribute("class", "img-zoom-lens");
  /* Chèn ống kính. */
  img. phần tử cha mẹ. insertB Before(lens, img);
  /* Tính tỷ lệ giữa DIV kết quả và ống kính. */
  cx = kết quả. offsetWidth / ống kính. offsetWidth;
  cy = kết quả. offsetChiều cao / ống kính. offsetHeight;
  /* Đặt thuộc tính nền cho kết quả DIV */
  result. 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. height * cy) + "px";
  /* Thực thi chức năng khi ai đó di chuyển con trỏ qua hình ảnh hoặc ống kính. */
  ống kính. addEventListener("mousemove", moveLens);
  img. addEventListener("mousemove", moveLens);
  /* Và cả cho màn hình cảm ứng. */
  ống kính. addEventListener("touchmove", moveLens);
  img. addEventListener("touchmove", moveLens);
  function moveLens(e) {
    var pos, x, y;
    / . preventDefault();
    e.preventDefault();
    /* 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 = pos. x - (thấu kính. offsetWidth / 2);
    y = pos. y - (thấu kính. offsetHeight / 2);
    /* Ngăn không cho ống kính được định vị bên 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;}
    if (x < 0) {x = 0;}
    if (y > img. chiều cao - ống kính. offsetHeight) {y = img. chiều cao - ống kính. offsetHeight;}
    if (y < 0) {y = 0;}
    /* Đặt vị trí của ống kính. */
    ống kính. Phong cách. left = x + "px";
    ống kính. Phong cách. top = y + "px";
    /* Hiển thị những gì ống kính "thấy". */
    kết quả. Phong cách. backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
  }
  function getCursorPos(e . cửa sổ. event;
    var a, x = 0, y = 0;
    e = e || window.event;
    /* Nhận vị trí x và y của hình ảnh. */
    a = img. getBoundingClientRect();
    /* Tính tọa độ x và y của con trỏ so với hình ảnh. */
    x = e. trangX - a. trái;
    y = e. trangY - một. top;
    /* Cân nhắc việc cuộn trang bất kỳ. */
    x = x - cửa sổ. pageXOffset;
    y = y - cửa sổ. pageYOffset;
    return {x. x, y. y};
  }
}

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

Làm cách nào để phóng to và thu nhỏ bằng JavaScript?

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

Làm cách nào để phóng to và thu nhỏ trong Angular?

Làm cách nào để nhận giá trị thu phóng của trình duyệt trong JavaScript?