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 stellenminTimestamp
undmaxTimestamp
die minimalen und maximalen Zeitstempel in den Daten dar;minPosition
undmaxPosition
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 = $('' + ''); node.css('left', position + 'px'); $(".timeline").append(node); });' + item.title + '' + '' + '' + '' + '
' + item.content + '
' + '
在上述代码中,我们首先使用$.each()
方法遍历数据数组,然后计算每个节点在时间轴上的位置。接着,我们使用$()
方法创建一个节点,并设置节点的样式和内容。最后,将节点添加到页面上。
4、实现节点点击事件
最后,我们可以实现一个节点点击事件,用于展开或折叠节点的内容。具体实现方式可以参考如下代码:
$(".node").click(function() { var body = $(this).children(".node-body"); if(body.is(":visible")) { body.slideUp(); } else { body.slideDown(); } });
在上述代码中,我们使用.click()
方法为节点添加点击事件处理函数,当节点被点击时判断节点的内容是否已经展开。如果已经展开,则使用.slideUp()
方法将其折叠起来;否则,使用.slideDown()
$.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 implementierenSchließ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: rrreeeIm 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!