HTML, CSS, jQuery: 아름다운 이미지 표시 그리드 만들기-JS 튜토리얼-php.cn

HTML, CSS, jQuery: 아름다운 이미지 표시 그리드 만들기

PHPz

풀어 주다： 2023-10-27 16:21:42

원래의

857명이 탐색했습니다.

HTML, CSS, jQuery: 아름다운 이미지 표시 그리드 만들기

HTML, CSS 및 jQuery: 아름다운 그림 표시 그리드 구축

오늘날 고도로 그래픽화된 인터넷 시대에 그림 표시는 웹사이트 디자인에서 없어서는 안 될 부분이 되었습니다. 사용자 경험을 개선하고 사용자의 관심을 끌기 위해서는 아름다운 이미지 디스플레이 그리드를 구축하는 것이 중요합니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 간단하지만 매력적인 이미지 표시 그리드를 구현합니다.

먼저 기본 HTML 구조를 만들어야 합니다. 다음은 이미지가 있는 그리드 컨테이너를 포함하는 간단한 HTML 템플릿입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>图片展示网格</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item">
        <img src="image1.jpg" alt="图片1">
      </div>
      <div class="grid-item">
        <img src="image2.jpg" alt="图片2">
      </div>
      <div class="grid-item">
        <img src="image3.jpg" alt="图片3">
      </div>
      <!-- 添加更多图片 -->
    </div>
  </body>
</html>

로그인 후 복사

다음으로 CSS를 사용하여 그리드 컨테이너와 이미지의 스타일을 지정하겠습니다. 다음은 필요에 따라 수정할 수 있는 간단한 CSS 예입니다.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  position: relative;
}

.grid-item img {
  width: 100%;
  display: block;
  border-radius: 5px;
}

.grid-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.grid-item:hover .overlay {
  opacity: 1;
}

.grid-item .overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.grid-item .overlay-content h3 {
  margin: 0;
  font-size: 24px;
}

.grid-item .overlay-content p {
  margin: 10px 0;
  font-size: 14px;
}

로그인 후 복사

위 CSS에서는 CSS 그리드 레이아웃을 사용하여 반응형 그리드 컨테이너를 만들었습니다. 또한 더 나은 시각적 효과를 제공하기 위해 각 이미지에 둥근 모서리와 반투명 마스크를 추가했습니다.

이제 jQuery를 사용하여 마우스 호버에 대한 동적 효과를 구현해 보겠습니다. 다음은 마우스를 이미지 위로 가져갈 때 마스크가 페이드 인되는 간단한 jQuery 예제입니다.

$(document).ready(function() {
  $(".grid-item").hover(
    function() {
      $(this).find(".overlay").stop().animate({ opacity: 1 }, 300);
    },
    function() {
      $(this).find(".overlay").stop().animate({ opacity: 0 }, 300);
    }
  );
});

로그인 후 복사

위의 jQuery 코드에서는 .hover()方法来捕捉鼠标悬停事件，并使用.stop()方法来停止之前的动画。然后，我们使用.animate() 메서드를 사용하여 마스크의 투명도를 조정하여 페이드 효과를 얻었습니다.

요약하자면, HTML, CSS 및 jQuery를 사용하여 아름다운 이미지 표시 그리드를 쉽게 구축할 수 있습니다. 필요에 따라 확장 및 사용자 정의하고 더 많은 이미지와 대화형 효과를 추가할 수 있습니다. 이러한 그리드는 제품, 사진, 예술 작품 등을 전시하는 데 사용될 수 있으며 웹 사이트에 시각적 매력과 사용자 참여를 추가할 수 있습니다.

위 내용은 HTML, CSS, jQuery: 아름다운 이미지 표시 그리드 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!