Analisis ringkas kaedah pelaksanaan sambungan berdasarkan jQuery

Dalam pembangunan web, untuk meningkatkan pengalaman pengguna, kami selalunya perlu menggunakan beberapa kesan interaktif untuk membimbing operasi pengguna, memaparkan data, dsb., dan atas dasar ini, kami berharap dapat menggunakan kesan sambungan untuk memaparkan kandungan yang lebih baik. Dalam artikel ini, kami akan memperkenalkan kaedah pelaksanaan sambungan berasaskan jQuery untuk membantu anda mencapai kesan sambungan dengan cepat.

1. Persediaan

Sebelum kita mula, kita perlu memperkenalkan jQuery dan pemalam yang kita perlukan - jquery.draw.js. Dalam fail HTML anda, anda boleh memperkenalkannya dengan kod berikut:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-draw/jquery.draw.js"></script>

Selain itu, kami juga perlu menentukan beberapa elemen untuk halaman, yang biasanya nod yang perlu disambungkan. Dalam artikel ini, kami akan menggunakan reka letak HTML yang mudah, seperti yang ditunjukkan di bawah:

<div class="container">
  <div class="node" data-node-id="1"></div>
  <div class="node" data-node-id="2"></div>
  <<div class="node" data-node-id="3"></div>
  <div class="node" data-node-id="4"></div>
</div>

Reka letak ini mengandungi empat elemen DIV bernama "nod", yang merupakan elemen yang perlu kami sambungkan. Setiap nod mempunyai atribut tersuai "data-node-id", yang digunakan untuk mengenal pasti ID nod dan nilainya boleh berupa sebarang rentetan atau nombor.

2. Lukis garisan

Sebelum melukis garisan antara nod, kita perlu menetapkan beberapa gaya dahulu. Dalam fail CSS, anda boleh menambah kod berikut:

.node {
  width: 50px;
  height: 50px;
  border: 2px solid #ccc;
  background-color: #fff;
  border-radius: 100%;
  position: absolute;
}

.container {
  height:500px;
}

Seterusnya, kita perlu menulis kod jQuery untuk mencapai kesan lukisan garisan. Dalam artikel ini, kami akan menggunakan API yang disediakan oleh pemalam jQuery.draw untuk mencapai kesan lukisan garisan. Dalam fail JavaScript anda, anda boleh menambah kod berikut:

$(function () {
  var nodes = $('.node');

  nodes.draggable({
    containment: ".container",
    start: function(e, ui) {
        ui.helper.css('z-index', 1);
    },
    stop: function(e, ui) {
        ui.helper.css('z-index', 0);
    }
  });

  var connections = [];

  function updateConnection(connection, endX, endY) {
    connection.draw('update', {
      end: [endX, endY]
    });
  }

  function createConnection(startNode, endNode) {
    var connection = $('.container').drawLine({
      strokeStyle: '#ccc',
      strokeWidth: 2,
      rounded: true,
      start: [startNode.position().left + startNode.width() / 2, startNode.position().top + startNode.height() / 2],
      end: [endNode.position().left + endNode.width() / 2, endNode.position().top + endNode.height() / 2]
    });
    connections.push({
      startNode: startNode,
      endNode: endNode,
      connection: connection
    });
  }

  function removeConnection(connectionIndex) {
    connections[connectionIndex].connection.draw('destroy');
    connections.splice(connectionIndex, 1);
  }

  nodes.click(function () {
    var startNode = $(this);

    nodes.not(startNode).click(function () {
      var endNode = $(this);
      var existingConnectionIndex = connections.findIndex(function (connection) {
        return connection.startNode.is(startNode) && connection.endNode.is(endNode);
      });

      if (existingConnectionIndex === -1) {
        createConnection(startNode, endNode);
      } else {
        removeConnection(existingConnectionIndex);
      }
    });
  });
});

Kod di atas melaksanakan operasi seperti nod boleh seret, sambungan boleh klik, penciptaan dan pemadaman, dsb., dan juga menambah beberapa fungsi mendengar acara, bertanggungjawab untuk Mengendalikan peristiwa tetikus dan mengawal penciptaan dan pemadaman objek talian sambungan. Semasa proses pelaksanaan, kami menggunakan API yang disediakan oleh pemalam jQuery.draw, seperti kaedah ".drawLine()" untuk mencipta objek garis penghubung dan boleh menetapkan gaya yang berbeza untuknya, seperti warna garisan atau garisan lebar, dsb. Di samping itu, tatasusunan "sambungan" digunakan untuk menyimpan objek talian sambungan yang dibuat supaya anda boleh beroperasi dengan cepat apabila anda perlu memadamkan talian sambungan.

3. Realisasikan paparan kesan

Melalui kod di atas, kami boleh berjaya merealisasikan kesan sambungan, dan boleh melakukan operasi yang berkaitan pada halaman Garis sambungan akan dipaparkan secara dinamik sebagai tetikus mata.

Dalam artikel ini, kami memperkenalkan kaedah pelaksanaan sambungan berasaskan jQuery, dan menerangkan langkah pelaksanaan khusus dan langkah berjaga-jaga melalui contoh kod Pembaca boleh berlatih mengikut kaedah ini untuk mencapai kesan interaktif dengan gambar dan teks, yang sangat baik Ia meningkatkan interaktiviti dan keterlihatan tapak web dan membawa pengalaman yang lebih mesra kepada pengguna.

Atas ialah kandungan terperinci Analisis ringkas kaedah pelaksanaan sambungan berdasarkan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!