forme de puzzle irrégulière jquery

Dans la conception Web moderne, l'utilisation de diverses formes et graphiques est devenue une partie importante du style de conception. Afin d’obtenir ces formes irrégulières, jQuery, un puissant framework JavaScript, est également largement utilisé.

Parmi eux, les formes irrégulières de puzzle sont devenues un style de design très populaire. Cet article explique comment utiliser jQuery pour obtenir des formes de puzzle irrégulières. Dans le même temps, nous découvrirons également le contexte technique pertinent et le processus de mise en œuvre.

1. Contexte technique

Avant de présenter comment utiliser jQuery pour obtenir des formes de puzzle irrégulières, nous devons comprendre certaines connaissances techniques connexes.

Tout d'abord, la propriété clip-path en CSS3 peut créer un masque basé sur un chemin, où le chemin peut être un rectangle, un cercle ou même un chemin personnalisé. Grâce à l'attribut clip-path, nous pouvons facilement créer diverses formes, et cet attribut prend également en charge les effets de transition.

Cependant, la compatibilité de l'attribut clip-path n'est pas bonne, notamment dans le navigateur IE. Par conséquent, nous devons utiliser un framework JavaScript pour obtenir des formes de puzzle irrégulières entre navigateurs.

2. Processus de mise en œuvre

Avec le soutien d'une formation technique, nous pouvons commencer à utiliser jQuery pour réaliser des formes de puzzle irrégulières.

Étape 1 : Structure HTML

Tout d'abord, nous devons définir la structure HTML en fonction des besoins de conception. Dans cet exemple, nous utilisons un élément ul pour contenir plusieurs éléments li. Chaque élément li représente une pièce de puzzle et son contenu peut être remplacé à volonté. Le code est le suivant :

<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>

Étape 2 : Style CSS

Afin d'obtenir la forme irrégulière du puzzle, nous devons utiliser la propriété transform en CSS3 pour transformer les pièces du puzzle. Plus précisément, nous devons utiliser la rotation, la translation et d'autres transformations pour réaliser des pièces de puzzle dans différentes directions et positions.

En même temps, afin de placer les pièces du puzzle à différents niveaux d'empilement, nous devons également utiliser l'attribut z-index. Le code est le suivant :

.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 */
}

Étape 3 : Code JavaScript

Ensuite, nous devons utiliser jQuery pour définir dynamiquement la position, l'angle de rotation et d'autres attributs de l'élément li. Le code est le suivant :

$(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)"
    });
  });
});

Dans le code JavaScript, nous récupérons d'abord toutes les pièces du puzzle et calculons la position et l'angle de chaque pièce du puzzle. Ensuite, utilisez la propriété transform en CSS3 pour transformer les pièces du puzzle.

Jusqu'à présent, nous avons réussi à implémenter une forme de puzzle simple et irrégulière à l'aide de jQuery. Le code complet est le suivant :

<!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>

3. Résumé

Cet article explique comment utiliser jQuery pour implémenter des formes de puzzle irrégulières et fournit également une explication détaillée du processus d'implémentation. Grâce à l'étude de cet article, les lecteurs peuvent maîtriser les points techniques et les méthodes de mise en œuvre de l'utilisation de jQuery pour réaliser des formes de puzzle irrégulières.

Cependant, il convient de noter que même si l'utilisation de jQuery peut simplifier le processus de développement, des problèmes tels que la compatibilité et les performances doivent toujours être pris en compte dans les projets réels, auxquels les concepteurs et les développeurs doivent prêter attention.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!