jquery unregelmäßige Zeitleiste

jquery unregelmäßige Zeitleiste

Zeitleiste ist eine gängige Art der Datenanzeige und wird normalerweise verwendet, um die Entwicklung eines bestimmten Themas oder die chronologische Reihenfolge von Ereignissen anzuzeigen. In der Front-End-Entwicklung können wir jQuery verwenden, um einen unregelmäßigen Zeitplan zu implementieren. Am Beispiel des Entwicklungsprozesses eines bestimmten Themas sind die folgenden Schritte zur Implementierung aufgeführt.

1. Daten erstellen

Zuerst müssen wir einen Datensatz erstellen, um jeden Knoten auf der Zeitleiste anzuzeigen. Die Daten sollten den Titel, den Inhalt, Bilder und andere Informationen jedes Knotens sowie den jedem Knoten entsprechenden Zeitstempel enthalten. Zum Beispiel:

var data = [
  {
    title: '起点',
    content: '从这里开始',
    image: 'image/start.png',
    timestamp: 1559347200
  },
  {
    title: '道路漫漫',
    content: '前方路程尚需努力',
    image: 'image/road.png',
    timestamp: 1561939200
  },
  {
    title: '小有成就',
    content: '终于开始发光发热了',
    image: 'image/achievement.png',
    timestamp: 1564617600
  },
  ...
];

2. Knotenposition berechnen

Als nächstes müssen wir die Position jedes Knotens auf der Zeitachse berechnen. Da es sich bei dieser Zeitleiste um eine unregelmäßige Zeitleiste handelt, müssen die unterschiedlichen Positionen der einzelnen Knoten berücksichtigt werden. Wir können die folgende Formel verwenden, um die Position des Knotens auf der Zeitachse zu berechnen:

position = (timestamp - minTimestamp) / (maxTimestamp - minTimestamp) * (maxPosition - minPosition) + minPosition;

Unter diesen stellen minTimestamp und maxTimestamp die minimalen und maximalen Zeitstempel in den Daten dar; minPosition und maxPosition stellen die äußerste linke und rechte Position der Zeitachse dar; position stellt die Position des Knotens auf der Zeitachse dar. minTimestamp和maxTimestamp表示数据中最小和最大的时间戳；minPosition和maxPosition表示时间轴的最左端和最右端的位置；position表示节点在时间轴上的位置。

3、渲染节点

现在，我们已经得到了每个节点在时间轴上的位置，接下来就是将节点渲染到页面上。我们可以使用如下的代码来渲染每个节点：

$.each(data, function(index, item) {
  var position = (item.timestamp - minTimestamp) / (maxTimestamp - minTimestamp) * (maxPosition - minPosition) + minPosition;

  var node = $('<div class="node">' +
    '<div class="node-title">' + item.title + '</div>' +
    '<div class="node-body">' +
    '<img src="' + item.image + '">' +
    '<p>' + item.content + '</p>' +
    '</div>' +
    '</div>');

  node.css('left', position + 'px');

  $(".timeline").append(node);
});

在上述代码中，我们首先使用$.each()方法遍历数据数组，然后计算每个节点在时间轴上的位置。接着，我们使用$()方法创建一个节点，并设置节点的样式和内容。最后，将节点添加到页面上。

4、实现节点点击事件

最后，我们可以实现一个节点点击事件，用于展开或折叠节点的内容。具体实现方式可以参考如下代码：

$(".node").click(function() {
  var body = $(this).children(".node-body");
  if(body.is(":visible")) {
    body.slideUp();
  } else {
    body.slideDown();
  }
});

在上述代码中，我们使用.click()方法为节点添加点击事件处理函数，当节点被点击时判断节点的内容是否已经展开。如果已经展开，则使用.slideUp()方法将其折叠起来；否则，使用.slideDown()

3. Knoten rendern

Da wir nun die Position jedes Knotens auf der Zeitachse ermittelt haben, besteht der nächste Schritt darin, die Knoten auf der Seite zu rendern. Wir können den folgenden Code verwenden, um jeden Knoten zu rendern: 🎜rrreee🎜Im obigen Code verwenden wir zuerst die Methode $.each(), um das Datenarray zu durchlaufen, und berechnen dann den Wert jedes Knotens auf dem Timeline-Standort. Als Nächstes verwenden wir die Methode $(), um einen Knoten zu erstellen und den Stil und Inhalt des Knotens festzulegen. Fügen Sie abschließend den Knoten zur Seite hinzu. 🎜🎜4. Knotenklickereignis implementieren🎜🎜Schließlich können wir ein Knotenklickereignis implementieren, um den Inhalt des Knotens zu erweitern oder zu reduzieren. Informationen zur spezifischen Implementierung finden Sie im folgenden Code: 🎜rrreee🎜Im obigen Code verwenden wir die Methode .click(), um dem Knoten eine Klickereignisverarbeitungsfunktion hinzuzufügen Es wird beurteilt, ob der Inhalt des Knotens erweitert wurde. Wenn es erweitert wurde, verwenden Sie die Methode .slideUp(), um es zu reduzieren. Andernfalls verwenden Sie die Methode .slideDown(), um es zu erweitern. 🎜🎜Zu diesem Zeitpunkt haben wir erfolgreich einen einfachen unregelmäßigen Zeitplan implementiert. In praktischen Anwendungen müssen mehr Interaktionsdetails und Optimierungsinhalte berücksichtigt werden. 🎜

Das obige ist der detaillierte Inhalt vonjquery unregelmäßige Zeitleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!