jquery bentuk teka-teki yang tidak teratur

Dalam reka bentuk web moden, penggunaan pelbagai bentuk dan grafik telah menjadi bahagian penting dalam gaya reka bentuk. Untuk mencapai bentuk yang tidak teratur ini, jQuery, rangka kerja JavaScript yang berkuasa, juga digunakan secara meluas.

Antaranya, bentuk teka-teki yang tidak teratur telah menjadi gaya reka bentuk yang sangat popular. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mencapai bentuk teka-teki yang tidak teratur. Pada masa yang sama, kami juga akan mempelajari tentang latar belakang teknikal yang berkaitan dan proses pelaksanaan.

1. Latar belakang teknikal

Sebelum memperkenalkan cara menggunakan jQuery untuk mencapai bentuk teka-teki yang tidak teratur, kita perlu memahami beberapa latar belakang teknikal yang berkaitan.

Pertama sekali, sifat laluan klip dalam CSS3 boleh mencipta topeng berasaskan laluan, di mana laluan itu boleh menjadi segi empat tepat, bulatan atau pun laluan tersuai. Melalui atribut clip-path, kita boleh mencipta pelbagai bentuk dengan mudah, dan atribut ini turut menyokong kesan peralihan.

Walau bagaimanapun, keserasian atribut laluan klip adalah tidak baik, terutamanya dalam pelayar IE. Oleh itu, kita perlu menggunakan rangka kerja JavaScript untuk mencapai bentuk teka-teki tidak teratur silang penyemak imbas.

2. Proses pelaksanaan

Dengan sokongan latar belakang teknikal, kami boleh mula menggunakan jQuery untuk merealisasikan bentuk teka-teki yang tidak teratur.

Langkah 1: Struktur HTML

Pertama, kita perlu mentakrifkan struktur HTML mengikut keperluan reka bentuk. Dalam contoh ini, kami menggunakan elemen ul untuk mengandungi beberapa elemen li Setiap elemen li mewakili kepingan teka-teki, dan kandungannya boleh diganti sesuka hati. Kodnya adalah seperti berikut:

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

Langkah 2: Gaya CSS

Untuk mencapai bentuk teka-teki yang tidak sekata, kita perlu menggunakan atribut transformasi dalam CSS3 untuk mengubah kepingan teka-teki. Secara khusus, kita perlu menggunakan putaran, menterjemah dan transformasi lain untuk merealisasikan kepingan teka-teki dalam arah dan kedudukan yang berbeza.

Pada masa yang sama, untuk meletakkan kepingan teka-teki pada tahap susunan yang berbeza, kita juga perlu menggunakan atribut indeks-z. Kodnya adalah seperti berikut:

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

Langkah 3: Kod JavaScript

Seterusnya, kita perlu menggunakan jQuery untuk menetapkan kedudukan, sudut putaran dan atribut lain elemen li secara dinamik. Kodnya adalah seperti berikut:

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

Dalam kod JavaScript, kami mula-mula mendapatkan semua kepingan teka-teki dan mengira kedudukan dan sudut setiap kepingan teka-teki. Kemudian, gunakan sifat transformasi dalam CSS3 untuk mengubah kepingan teka-teki.

Setakat ini, kami telah berjaya melaksanakan bentuk teka-teki mudah yang tidak teratur menggunakan jQuery. Kod lengkap adalah seperti berikut:

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

Artikel ini memperkenalkan cara menggunakan jQuery untuk melaksanakan bentuk teka-teki yang tidak teratur, dan juga memberikan penjelasan terperinci tentang proses pelaksanaan . Melalui kajian artikel ini, pembaca boleh menguasai mata teknikal dan kaedah pelaksanaan menggunakan jQuery untuk merealisasikan bentuk teka-teki yang tidak teratur.

Walau bagaimanapun, perlu diingatkan bahawa walaupun menggunakan jQuery boleh memudahkan proses pembangunan, isu-isu seperti keserasian dan prestasi masih perlu dipertimbangkan dalam projek sebenar, yang perlu diberi perhatian oleh kedua-dua pereka dan pembangun.

Atas ialah kandungan terperinci jquery bentuk teka-teki yang tidak teratur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!