Hướng dẫn how do you click zoom an image in css? - làm thế nào để bạn nhấp vào phóng to một hình ảnh trong css?

Chào mừng bạn đến với một hướng dẫn về cách tạo một hình ảnh phóng to với CSS và JavaScript. Cần gia vị bộ sưu tập hình ảnh của bạn hoặc một cửa hàng thương mại điện tử? Tôi chắc chắn rằng có rất nhiều plugin hình ảnh của hình ảnh như vậy trôi nổi trên internet, vì vậy chúng tôi sẽ làm một cái gì đó khác một chút với hướng dẫn này.

Thay vì cung cấp cho bạn nhiều plugin cồng kềnh yêu cầu thư viện của bên thứ 3, chúng tôi sẽ đi qua một vài cách để bạn có thể tự tạo bằng cách sử dụng JavaScript CSS và Vanilla JavaScript thuần túy. Đọc trên!

Tôi đã bao gồm một tệp zip với tất cả mã nguồn khi bắt đầu hướng dẫn này, vì vậy bạn không phải sao chép mọi thứ, hoặc nếu bạn chỉ muốn đi thẳng vào.

MỤC LỤC

Tải xuống & ghi chú

Thứ nhất, đây là liên kết tải xuống đến mã ví dụ như đã hứa.

Ghi chú nhanh

Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới, nếu bạn cần câu trả lời khẩn cấp, vui lòng kiểm tra danh sách các trang web của tôi để nhận trợ giúp lập trình.

Mã hóa ví dụ Tải xuống

Nhấn vào đây để tải xuống mã nguồn trong tệp zip - Tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên đó nếu bạn muốn.

Được rồi, bây giờ chúng ta hãy đi vào các cách khác nhau và ví dụ về việc thu phóng hình ảnh trong CSS và JavaScript.

Ví dụ 1) Phóng to lơ lửng

1A) Demo zoom lơ lửng

1b) Hover zoom html

1-hover.html

<img src="music.jpg" id="zoomA"/>

Đúng vậy, nó chỉ là thẻ

#zoomA {
  /* (A) OPTIONAL DIMENSIONS */
  width: 600px;
  height: auto;
 
  /* (B) ANIMATE ZOOM */
  /* ease | ease-in | ease-out | linear */
  transition: transform ease-in-out 0.3s;
}
 
/* (C) ZOOM ON HOVER */
#zoomA:hover { transform: scale(1.2); }

1b) Hover zoom CSS

1-hover.css

#zoomA {
  /* (A) OPTIONAL DIMENSIONS */
  width: 600px;
  height: auto;
 
  /* (B) ANIMATE ZOOM */
  /* ease | ease-in | ease-out | linear */
  transition: transform ease-in-out 0.3s;
}
 
/* (C) ZOOM ON HOVER */
#zoomA:hover { transform: scale(1.2); }

Ai nói zoom hình ảnh phải khó khăn !?

• (C) Thu phóng di chuột được thực hiện với

  #zoomA {
    /* (A) OPTIONAL DIMENSIONS */
    width: 600px;
    height: auto;
   
    /* (B) ANIMATE ZOOM */
    /* ease | ease-in | ease-out | linear */
    transition: transform ease-in-out 0.3s;
  }
   
  /* (C) ZOOM ON HOVER */
  #zoomA:hover { transform: scale(1.2); }

  3. Nếu bạn muốn có một zoom lớn hơn, thì chỉ cần thay đổi

  #zoomA {
    /* (A) OPTIONAL DIMENSIONS */
    width: 600px;
    height: auto;
   
    /* (B) ANIMATE ZOOM */
    /* ease | ease-in | ease-out | linear */
    transition: transform ease-in-out 0.3s;
  }
   
  /* (C) ZOOM ON HOVER */
  #zoomA:hover { transform: scale(1.2); }

  4. The hover zoom is done with

  #zoomA {
    /* (A) OPTIONAL DIMENSIONS */
    width: 600px;
    height: auto;
   
    /* (B) ANIMATE ZOOM */
    /* ease | ease-in | ease-out | linear */
    transition: transform ease-in-out 0.3s;
  }
   
  /* (C) ZOOM ON HOVER */
  #zoomA:hover { transform: scale(1.2); }

  3. If you want a “larger zoom”, simply change the

  #zoomA {
    /* (A) OPTIONAL DIMENSIONS */
    width: 600px;
    height: auto;
   
    /* (B) ANIMATE ZOOM */
    /* ease | ease-in | ease-out | linear */
    transition: transform ease-in-out 0.3s;
  }
   
  /* (C) ZOOM ON HOVER */
  #zoomA:hover { transform: scale(1.2); }

  4.
• (B) Để thêm hoạt hình zoom, chúng tôi sử dụng

  #zoomA {
    /* (A) OPTIONAL DIMENSIONS */
    width: 600px;
    height: auto;
   
    /* (B) ANIMATE ZOOM */
    /* ease | ease-in | ease-out | linear */
    transition: transform ease-in-out 0.3s;
  }
   
  /* (C) ZOOM ON HOVER */
  #zoomA:hover { transform: scale(1.2); }

  5. To add zoom animation, we use

  #zoomA {
    /* (A) OPTIONAL DIMENSIONS */
    width: 600px;
    height: auto;
   
    /* (B) ANIMATE ZOOM */
    /* ease | ease-in | ease-out | linear */
    transition: transform ease-in-out 0.3s;
  }
   
  /* (C) ZOOM ON HOVER */
  #zoomA:hover { transform: scale(1.2); }

  5.
• (A) Các kích thước thực sự là tùy chọn. Nếu bạn muốn một hình ảnh phản hồi, hãy sử dụng

  #zoomA {
    /* (A) OPTIONAL DIMENSIONS */
    width: 600px;
    height: auto;
   
    /* (B) ANIMATE ZOOM */
    /* ease | ease-in | ease-out | linear */
    transition: transform ease-in-out 0.3s;
  }
   
  /* (C) ZOOM ON HOVER */
  #zoomA:hover { transform: scale(1.2); }

  6 The dimensions are actually optional. If you want a responsive image, use

  #zoomA {
    /* (A) OPTIONAL DIMENSIONS */
    width: 600px;
    height: auto;
   
    /* (B) ANIMATE ZOOM */
    /* ease | ease-in | ease-out | linear */
    transition: transform ease-in-out 0.3s;
  }
   
  /* (C) ZOOM ON HOVER */
  #zoomA:hover { transform: scale(1.2); }

  6

Ví dụ 2) chứa lơ lửng lala

2A) chứa Demo Zoom Hover Zoom

2b) chứa HTML Zoom HTML

2-contained.html

<div id="zoomBOut">
  <div id="zoomBIn"></div>
</div>

Các máy bay lượn trước đó hoạt động, nhưng nó có thể bao gồm văn bản xung quanh khi hình ảnh mở rộng ra khỏi vị trí. Vì vậy, đây là một sự thay thế với một hộp giới hạn trên mạng:

• #zoomA {
    /* (A) OPTIONAL DIMENSIONS */
    width: 600px;
    height: auto;
   
    /* (B) ANIMATE ZOOM */
    /* ease | ease-in | ease-out | linear */
    transition: transform ease-in-out 0.3s;
  }
   
  /* (C) ZOOM ON HOVER */
  #zoomA:hover { transform: scale(1.2); }

  7 là hộp giới hạn bên ngoài.

• #zoomA {
    /* (A) OPTIONAL DIMENSIONS */
    width: 600px;
    height: auto;
   
    /* (B) ANIMATE ZOOM */
    /* ease | ease-in | ease-out | linear */
    transition: transform ease-in-out 0.3s;
  }
   
  /* (C) ZOOM ON HOVER */
  #zoomA:hover { transform: scale(1.2); }

  8 Hình ảnh chính nó.

2c) chứa lala zoom css

2-contained.css

/* (A) OUTER WRAPPER */
#zoomBOut {
  /* (A1) DIMENSIONS */
  width: 600px;
  height: 338px;
 
  /* (A2) HIDE SCROLLBARS */
  overflow: hidden;
}
 
/* (B) INNER WRAPPER */
#zoomBIn {
  /* (B1) FIT OUTER WRAPPER */
  width: 100%;
  height: 100%;
 
  /* (B2) BACKGROUND IMAGE */
  background-image: url("music.jpg");
  background-position: center;
  background-size: cover;
 
  /* (B3) ANIMATE ZOOM */
  transition: transform ease 0.3s;
}
 
/* (C) ZOOM ON HOVER */
#zoomBIn:hover { transform: scale(1.2); }

• (C) Cơ chế zoom chính vẫn còn cũ

  #zoomA {
    /* (A) OPTIONAL DIMENSIONS */
    width: 600px;
    height: auto;
   
    /* (B) ANIMATE ZOOM */
    /* ease | ease-in | ease-out | linear */
    transition: transform ease-in-out 0.3s;
  }
   
  /* (C) ZOOM ON HOVER */
  #zoomA:hover { transform: scale(1.2); }

  9 The main zoom mechanism is still the same old

  #zoomA {
    /* (A) OPTIONAL DIMENSIONS */
    width: 600px;
    height: auto;
   
    /* (B) ANIMATE ZOOM */
    /* ease | ease-in | ease-out | linear */
    transition: transform ease-in-out 0.3s;
  }
   
  /* (C) ZOOM ON HOVER */
  #zoomA:hover { transform: scale(1.2); }

  9
• (B) Nhưng hãy lưu ý rằng hình ảnh bây giờ là

  <div id="zoomBOut">
    <div id="zoomBIn"></div>
  </div>

  0 thay thế. But take note that the image is now a

  <div id="zoomBOut">
    <div id="zoomBIn"></div>
  </div>

  0 instead.
• (A) Đặt kích thước trên hộp bên ngoài

  <div id="zoomBOut">
    <div id="zoomBIn"></div>
  </div>

  1 sẽ hạn chế hình ảnh mở rộng ra khỏi boudaries. Set dimensions on the outer box

  <div id="zoomBOut">
    <div id="zoomBIn"></div>
  </div>

  1 will restrict the image from expanding out of boudaries.

Ví dụ 3) Theo dõi zoom

3a) Theo bản demo zoom

3B) Theo dõi Zoom HTML & CSS

3-follow.html

<div id="zoomC"></div>

3-follow.css

#zoomC {
  /* (A) DIMENSIONS */
  width: 600px;
  height: 338px;
 
  /* (B) BACKGROUND IMAGE */
  background: url("music.jpg");
  background-position: center;
  background-size: cover;
}

HTML và CSS rất đơn giản đối với zoom sau. Chỉ cần một trình bao bọc

<div id="zoomBOut">
  <div id="zoomBIn"></div>
</div>

3c) JavaScript

3-follow.js

// CREDITS : https://www.cssscript.com/image-zoom-pan-hover-detail-view/
var addZoom = (target) => {
  // (A) GET CONTAINER + IMAGE SOURCE
  let container = document.getElementById(target),
      imgsrc = container.currentStyle || window.getComputedStyle(container, false);
      imgsrc = imgsrc.backgroundImage.slice(4, -1).replace(/"/g, "");
 
  // (B) LOAD IMAGE + ATTACH ZOOM
  let img = new Image();
  img.src = imgsrc;
  img.onload = () => {
    // (B1) CALCULATE ZOOM RATIO
    let ratio = img.naturalHeight / img.naturalWidth,
        percentage = ratio * 100 + "%";
 
    // (B2) ATTACH ZOOM ON MOUSE MOVE
    container.onmousemove = (e) => {
      let rect = e.target.getBoundingClientRect(),
          xPos = e.clientX - rect.left,
          yPos = e.clientY - rect.top,
          xPercent = xPos / (container.clientWidth / 100) + "%",
          yPercent = yPos / ((container.clientWidth * ratio) / 100) + "%";
 
      Object.assign(container.style, {
        backgroundPosition: xPercent + " " + yPercent,
        backgroundSize: img.naturalWidth + "px"
      });
    };
 
    // (B3) RESET ZOOM ON MOUSE LEAVE
    container.onmouseleave = (e) => {
      Object.assign(container.style, {
        backgroundPosition: "center",
        backgroundSize: "cover"
      });
    };
  }
};
 
// (C) ATTACH FOLLOW ZOOM
window.onload = () => { addZoom("zoomC"); };

Tín dụng cho tập lệnh CSS cho tập lệnh gốc. Zoom theo sau không còn có thể được thực hiện trong CSS, và phép thuật phải xảy ra trong JavaScript. Sẽ không chạy qua từng dòng, nhưng hàm

<div id="zoomBOut">
  <div id="zoomBIn"></div>
</div>

• (A) Về cơ bản, nhận

  <div id="zoomBOut">
    <div id="zoomBIn"></div>
  </div>

  0 từ

  <div id="zoomBOut">
    <div id="zoomBIn"></div>
  </div>

  5 và có được kích thước hình ảnh đầy đủ. Basically, get the

  <div id="zoomBOut">
    <div id="zoomBIn"></div>
  </div>

  0 from

  <div id="zoomBOut">
    <div id="zoomBIn"></div>
  </div>

  5 and get the full image dimension.
• (B) Khi chuột lơ lửng trên

  <div id="zoomBOut">
    <div id="zoomBIn"></div>
  </div>

  5, thay vào đó hiển thị hình ảnh với kích thước đầy đủ. When the mouse hovers over

  <div id="zoomBOut">
    <div id="zoomBIn"></div>
  </div>

  5, show the image in full-size instead.
• (B1 & B2) Sau đó, toán học hoang dã xảy ra. Đọc các vị trí X và Y của chuột, sau đó dịch nó theo tỷ lệ phần trăm của hình ảnh có kích thước đầy đủ. Then wild Math happens. Read the X and Y positions of the mouse, then translate it as a percentage of the full-sized image.
• (B3) Cuối cùng, khi chuột rời khỏi thùng chứa, nó sẽ được khôi phục trở lại hình nền ban đầu. Finally, as the mouse leaves the container, it will be restored back to the original background image.

Ví dụ 4) Hộp đèn toàn màn hình

4A) Bản demo hộp đèn

4b) HTML hộp đèn

4-lightbox.html

<!-- (A) LIGHTBOX CONTAINER -->
<div id="lightbox"></div>
 
<!-- (B) THE IMAGES -->
<img src="music.jpg" class="zoomD"/>

HTML rất đơn giản một lần nữa:

• <div id="zoomBOut">
    <div id="zoomBIn"></div>
  </div>

  7 Nền của hộp đèn, bao gồm toàn bộ cửa sổ.

• <div id="zoomBOut">
    <div id="zoomBIn"></div>
  </div>

  8 Hình ảnh mà bạn muốn đính kèm hộp đèn.

4c) CSS hộp đèn

4-lightbox.css

/* (A) LIGHTBOX BACKGROUND */
#lightbox {
  /* (A1) COVERS FULLSCREEN */
  position: fixed; z-index: 999;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
 
  /* (A2) BACKGROUND */
  background: rgba(0, 0, 0, 0.5);
 
  /* (A3) CENTER IMAGE ON SCREEN */
  display: flex;
  align-items: center;
  align-items: center;
 
  /* (A4) HIDDEN BY DEFAULT */
  visibility: hidden;
  opacity: 0;
 
  /* (A5) SHOW/HIDE ANIMATION */
  transition: opacity ease 0.4s;
}
 
/* (A6) TOGGLE VISIBILITY */
#lightbox.show {
  visibility: visible;
  opacity: 1;
}
 
/* (B) LIGHTBOX IMAGE */
#lightbox img {
  /* (B1) DIMENSIONS */
  width: 100%;
  height: auto;
 
  /* (B2) IMAGE FIT */
  /* contain | cover | fill | scale-down */
  object-fit: cover;
}
 
/* (C) LIGHTBOX IMAGE - FULLSCREEN ALTERNATIVE *
#lightbox img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

Sẽ không giải thích từng dòng này. Nó có thể trông phức tạp, nhưng nó thực sự chỉ dài.

1. Tạo một màn hình toàn màn hình bìa nền.
2. Hình ảnh hộp đèn sẽ trông như thế nào.

4D) JavaScript hộp đèn

4-lightbox.js

window.onload = () => {
  // (A) GET LIGHTBOX & ALL .ZOOMD IMAGES
  let all = document.getElementsByClassName("zoomD"),
      lightbox = document.getElementById("lightbox");
 
  // (B) CLICK TO SHOW IMAGE IN LIGHTBOX
  // * SIMPLY CLONE INTO LIGHTBOX & SHOW
  if (all.length>0) { for (let i of all) {
    i.onclick = () => {
      let clone = i.cloneNode();
      clone.className = "";
      lightbox.innerHTML = "";
      lightbox.appendChild(clone);
      lightbox.className = "show";
    };
  }}
 
  // (C) CLICK TO CLOSE LIGHTBOX
  lightbox.onclick = () => {
    lightbox.className = "";
  };
};

JavaScript là nơi ma thuật xảy ra.

1. Khi cửa sổ được tải đầy đủ, tập lệnh này sẽ tìm kiếm tất cả các hình ảnh với & nbsp; ____ 29 & nbsp; CSS Class và đính kèm sự kiện & nbsp;
2. Khi một hình ảnh được nhấp, tạo một bản sao, thêm nó vào hộp đèn và hiển thị nó.
3. Nhấp vào thùng chứa hộp đèn để đóng nó.

Ví dụ 5) API toàn màn hình

5A) Bản demo toàn màn hình

5b) HTML toàn màn hình

5-fullscreen.html

#zoomA {
  /* (A) OPTIONAL DIMENSIONS */
  width: 600px;
  height: auto;
 
  /* (B) ANIMATE ZOOM */
  /* ease | ease-in | ease-out | linear */
  transition: transform ease-in-out 0.3s;
}
 
/* (C) ZOOM ON HOVER */
#zoomA:hover { transform: scale(1.2); }

Cuối cùng, đây là một cách khác để tạo hình ảnh toàn màn hình, sử dụng API toàn màn hình gốc. Đối với HTML, chúng ta chỉ cần thẻ

#zoomA {
  /* (A) OPTIONAL DIMENSIONS */
  width: 600px;
  height: auto;
 
  /* (B) ANIMATE ZOOM */
  /* ease | ease-in | ease-out | linear */
  transition: transform ease-in-out 0.3s;
}
 
/* (C) ZOOM ON HOVER */
#zoomA:hover { transform: scale(1.2); }

5c) JavaScript toàn màn hình

5-fullscreen.js

#zoomA {
  /* (A) OPTIONAL DIMENSIONS */
  width: 600px;
  height: auto;
 
  /* (B) ANIMATE ZOOM */
  /* ease | ease-in | ease-out | linear */
  transition: transform ease-in-out 0.3s;
}
 
/* (C) ZOOM ON HOVER */
#zoomA:hover { transform: scale(1.2); }

Vòng lặp qua tất cả các hình ảnh -

/* (A) OUTER WRAPPER */
#zoomBOut {
  /* (A1) DIMENSIONS */
  width: 600px;
  height: 338px;
 
  /* (A2) HIDE SCROLLBARS */
  overflow: hidden;
}
 
/* (B) INNER WRAPPER */
#zoomBIn {
  /* (B1) FIT OUTER WRAPPER */
  width: 100%;
  height: 100%;
 
  /* (B2) BACKGROUND IMAGE */
  background-image: url("music.jpg");
  background-position: center;
  background-size: cover;
 
  /* (B3) ANIMATE ZOOM */
  transition: transform ease 0.3s;
}
 
/* (C) ZOOM ON HOVER */
#zoomBIn:hover { transform: scale(1.2); }

/* (A) OUTER WRAPPER */
#zoomBOut {
  /* (A1) DIMENSIONS */
  width: 600px;
  height: 338px;
 
  /* (A2) HIDE SCROLLBARS */
  overflow: hidden;
}
 
/* (B) INNER WRAPPER */
#zoomBIn {
  /* (B1) FIT OUTER WRAPPER */
  width: 100%;
  height: 100%;
 
  /* (B2) BACKGROUND IMAGE */
  background-image: url("music.jpg");
  background-position: center;
  background-size: cover;
 
  /* (B3) ANIMATE ZOOM */
  transition: transform ease 0.3s;
}
 
/* (C) ZOOM ON HOVER */
#zoomBIn:hover { transform: scale(1.2); }

Liên kết & Tài liệu tham khảo

• Cách tạo hiệu ứng thu phóng hình ảnh CSS tinh khiết - Hongkiat.com
• Hình ảnh nền phóng to-CSS-tricks
• Cách tạo hình ảnh thu phóng trong HTML - Codeconvey
• Hình ảnh Zoom & Pan On Hover - Chế độ xem chi tiết - CSSScript
• Ví dụ về Codepen - Zoom lơ lửng | Theo dõi zoom

Hướng dẫn YouTube

KẾT THÚC

Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cuối hướng dẫn ngắn này. Tôi hy vọng nó đã giúp bạn tạo một trang web tốt hơn và nếu bạn có bất cứ điều gì bạn muốn thêm vào hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc!