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 stellenminTimestampundmaxTimestampdie minimalen und maximalen Zeitstempel in den Daten dar;minPositionundmaxPositionstellen die äußerste linke und rechte Position der Zeitachse dar;positionstellt 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 = $('
' + '
' + item.title + '
' + '
' + '' + '
' + item.content + '
' + '
' + '
'); 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()

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!