jquery chronologie irrégulière

chronologie irrégulière jquery

La chronologie est un moyen courant d'afficher des données, généralement utilisé pour montrer le développement d'un certain sujet ou l'ordre chronologique des événements. Dans le développement front-end, nous pouvons utiliser jQuery pour implémenter une chronologie irrégulière. En prenant comme exemple le processus de développement d'un certain sujet, voici les étapes de mise en œuvre.

1. Construire des données

Tout d'abord, nous devons construire un ensemble de données pour afficher chaque nœud sur la chronologie. Les données doivent inclure le titre, le contenu, les images et autres informations de chaque nœud, ainsi que l'horodatage correspondant à chaque nœud. Par exemple :

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. Calculer la position du nœud

Ensuite, nous devons calculer la position de chaque nœud sur la chronologie. Cette chronologie étant une chronologie irrégulière, il est nécessaire de considérer les différentes positions de chaque nœud. Nous pouvons utiliser la formule suivante pour calculer la position du nœud sur la timeline :

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

où,minTimestampetmaxTimestampreprésentent les horodatages minimum et maximum dans les données < ; code >minPositionetmaxPositionreprésentent les positions les plus à gauche et à droite de la timeline ;positionreprésente la position du nœud sur la timeline.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()

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!