Eine kurze Analyse der Verbindungsimplementierungsmethode basierend auf jQuery

In der Webentwicklung müssen wir zur Verbesserung der Benutzererfahrung häufig einige interaktive Effekte verwenden, um Benutzervorgänge zu steuern, Daten anzuzeigen usw., und auf dieser Grundlage hoffen wir, Verbindungseffekte zur besseren Anzeige von Inhalten nutzen zu können. In diesem Artikel stellen wir die jQuery-basierte Verbindungsimplementierungsmethode vor, damit Sie schnell den Verbindungseffekt erzielen können.

1. Vorbereitung

Bevor wir beginnen, müssen wir jQuery und das benötigte Plug-in vorstellen – jquery.draw.js. In Ihrer HTML-Datei können Sie es mit dem folgenden Code einführen:

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

Darüber hinaus müssen wir auch einige Elemente für die Seite definieren, bei denen es sich normalerweise um Knoten handelt, die verbunden werden müssen. In diesem Artikel verwenden wir ein einfaches HTML-Layout, wie unten gezeigt:

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

Dieses Layout enthält vier DIV-Elemente mit dem Namen „node“, das sind die Knoten, die wir verbinden müssen. Jeder Knoten verfügt über ein benutzerdefiniertes Attribut „data-node-id“, mit dem die ID des Knotens identifiziert wird. Sein Wert kann eine beliebige Zeichenfolge oder Zahl sein.

2. Linien zeichnen

Bevor wir Linien zwischen Knoten zeichnen, müssen wir zunächst einige Stile festlegen. In der CSS-Datei können Sie den folgenden Code hinzufügen:

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

.container {
  height:500px;
}

Als nächstes müssen wir jQuery-Code schreiben, um den Strichzeichnungseffekt zu erzielen. In diesem Artikel verwenden wir die vom jQuery.draw-Plugin bereitgestellte API, um den Strichzeichnungseffekt zu erzielen. In Ihrer JavaScript-Datei können Sie den folgenden Code hinzufügen:

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

Der obige Code implementiert Vorgänge wie ziehbare Knoten, anklickbare Verbindungen, Erstellung und Löschung usw. und fügt außerdem einige Ereignisüberwachungsfunktionen hinzu, um Mausereignisse zu verarbeiten und Verbindungen zu steuern. Anlegen und Löschen von Linienobjekten. Während des Implementierungsprozesses haben wir die vom jQuery.draw-Plugin bereitgestellte API verwendet, z. B. die Methode „.drawLine ()“, um ein Verbindungslinienobjekt zu erstellen, und können verschiedene Stile dafür festlegen, z. B. Linienfarbe oder Linie Breite usw. Darüber hinaus wird das Array „Verbindungen“ zum Speichern der erstellten Verbindungslinienobjekte verwendet, sodass Sie schnell arbeiten können, wenn Sie eine Verbindungslinie löschen müssen.

3. Realisieren Sie die Effektanzeige

Mit dem obigen Code können wir den Verbindungseffekt erfolgreich realisieren und entsprechende Vorgänge auf der Seite ausführen. Die Verbindungslinie wird dynamisch als Mauszeiger angezeigt.

In diesem Artikel stellen wir die jQuery-basierte Verbindungsimplementierungsmethode vor und erläutern die spezifischen Implementierungsschritte und Vorsichtsmaßnahmen anhand von Codebeispielen. Leser können anhand dieser Methode üben, um interaktive Effekte mit Bildern und Texten zu erzielen, was die Interaktivität der Website erheblich verbessert und Sichtbarkeit sorgen für ein benutzerfreundlicheres Erlebnis.

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Verbindungsimplementierungsmethode basierend auf jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!