jquery 불규칙한 퍼즐 모양-프런트엔드 Q&A-php.cn

jquery 불규칙한 퍼즐 모양

WBOY

풀어 주다： 2023-05-28 10:06:37

원래의

656명이 탐색했습니다.

현대 웹 디자인에서는 다양한 모양과 그래픽의 사용이 디자인 스타일의 중요한 부분이 되었습니다. 이러한 불규칙한 모양을 구현하기 위해 강력한 JavaScript 프레임워크인 jQuery도 널리 사용됩니다.

그 중에서도 불규칙한 퍼즐 모양이 매우 인기 있는 디자인 스타일이 되었습니다. 이 기사에서는 jQuery를 사용하여 불규칙한 퍼즐 모양을 만드는 방법을 소개합니다. 동시에 관련 기술 배경과 구현 프로세스에 대해서도 알아봅니다.

기술적 배경

jQuery를 사용하여 불규칙한 퍼즐 모양을 만드는 방법을 소개하기 전에 관련 기술 배경을 이해해야 합니다.

우선, CSS3의 클립 경로 속성은 경로 기반 마스크를 생성할 수 있으며 경로는 직사각형, 원 또는 사용자 정의 경로가 될 수 있습니다. Clip-path 속성을 통해 다양한 모양을 쉽게 생성할 수 있으며, 이 속성은 전환 효과도 지원합니다.

그러나 특히 IE 브라우저에서는 클립 경로 속성의 호환성이 좋지 않습니다. 따라서 브라우저 간 불규칙한 퍼즐 모양을 달성하려면 JavaScript 프레임워크를 사용해야 합니다.

구현 프로세스

기술적 배경의 지원을 통해 jQuery를 사용하여 불규칙한 퍼즐 모양을 구현할 수 있습니다.

1단계: HTML 구조

먼저 디자인 요구 사항에 따라 HTML 구조를 정의해야 합니다. 이 예에서는 ul 요소를 사용하여 여러 li 요소를 포함합니다. 각 li 요소는 퍼즐 조각을 나타내며 해당 내용은 마음대로 대체될 수 있습니다. 코드는 다음과 같습니다.

<ul class="puzzle">
  <li class="piece"><div>拼图块1</div></li>
  <li class="piece"><div>拼图块2</div></li>
  <li class="piece"><div>拼图块3</div></li>
  <li class="piece"><div>拼图块4</div></li>
  <li class="piece"><div>拼图块5</div></li>
  <li class="piece"><div>拼图块6</div></li>
</ul>

로그인 후 복사

2단계: CSS 스타일

불규칙한 퍼즐 모양을 얻으려면 CSS3의 변형 속성을 사용하여 퍼즐 조각을 변형해야 합니다. 특히, 다양한 방향과 위치의 퍼즐 조각을 구현하려면 회전, 이동 및 기타 변환을 사용해야 합니다.

동시에 퍼즐 조각을 다양한 쌓기 수준에 배치하려면 Z-색인 속성도 사용해야 합니다. 코드는 다음과 같습니다.

.puzzle {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 1; /* 默认堆叠层级为1 */
  transition: all 0.5s ease; /* 过渡效果 */
}
.piece:nth-child(odd) {
  transform: rotate(30deg) translate(100px) rotate(-30deg); /* 变换1 */
  z-index: 2; /* 堆叠层级为2 */
}
.piece:nth-child(even) {
  transform: rotate(-30deg) translate(100px) rotate(30deg); /* 变换2 */
}
.piece:hover {
  z-index: 3; /* 鼠标悬停时堆叠层级为3 */
}

로그인 후 복사

3단계: JavaScript 코드

다음으로 jQuery를 사용하여 li 요소의 위치, 회전 각도 및 기타 속성을 동적으로 설정해야 합니다. 코드는 다음과 같습니다.

$(document).ready(function() {
  var pieces = $(".puzzle .piece"); /* 获取所有拼图块 */
  var count = pieces.length; /* 记录总数 */
  var angle = 360 / count; /* 计算旋转角度 */

  /* 设置每个拼图块的位置、角度 */
  pieces.each(function(index) {
    var piece = $(this);
    var degree = angle * index;
    var posX = Math.sin(degree * Math.PI / 180) * 200;
    var posY = -Math.cos(degree * Math.PI / 180) * 200;
    piece.css({
      "left": posX + "px",
      "top": posY + "px",
      "transform": "rotate(" + degree + "deg)"
    });
  });
});

로그인 후 복사

JavaScript 코드에서는 먼저 모든 퍼즐 조각을 가져오고 각 퍼즐 조각의 위치와 각도를 계산합니다. 그런 다음 CSS3의 변환 속성을 사용하여 퍼즐 조각을 변환합니다.

지금까지 jQuery를 사용하여 간단한 불규칙 퍼즐 모양을 성공적으로 구현했습니다. 전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery不规则拼图形状</title>
  <style>
    .puzzle {
      margin: 0;
      padding: 0;
      list-style: none;
      position: relative;
    }
    .piece {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 200px;
      background-color: #fff;
      border: 1px solid #ccc;
      z-index: 1; /* 默认堆叠层级为1 */
      transition: all 0.5s ease; /* 过渡效果 */
    }
    .piece:nth-child(odd) {
      transform: rotate(30deg) translate(100px) rotate(-30deg); /* 变换1 */
      z-index: 2; /* 堆叠层级为2 */
    }
    .piece:nth-child(even) {
      transform: rotate(-30deg) translate(100px) rotate(30deg); /* 变换2 */
    }
    .piece:hover {
      z-index: 3; /* 鼠标悬停时堆叠层级为3 */
    }
  </style>
</head>
<body>
  <ul class="puzzle">
    <li class="piece"><div>拼图块1</div></li>
    <li class="piece"><div>拼图块2</div></li>
    <li class="piece"><div>拼图块3</div></li>
    <li class="piece"><div>拼图块4</div></li>
    <li class="piece"><div>拼图块5</div></li>
    <li class="piece"><div>拼图块6</div></li>
  </ul>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function() {
      var pieces = $(".puzzle .piece"); /* 获取所有拼图块 */
      var count = pieces.length; /* 记录总数 */
      var angle = 360 / count; /* 计算旋转角度 */

      /* 设置每个拼图块的位置、角度 */
      pieces.each(function(index) {
        var piece = $(this);
        var degree = angle * index;
        var posX = Math.sin(degree * Math.PI / 180) * 200;
        var posY = -Math.cos(degree * Math.PI / 180) * 200;
        piece.css({
          "left": posX + "px",
          "top": posY + "px",
          "transform": "rotate(" + degree + "deg)"
        });
      });
    });
  </script>
</body>
</html>

로그인 후 복사