jquery irregular timeline

jquery Irregular Timeline

Timeline is a common way of displaying data, usually used to show the development of a certain topic or the chronological order of events. In front-end development, we can use jQuery to implement an irregular timeline. Taking the development process of a certain topic as an example, the following are the steps for implementation.

1. Construct data

First, we need to construct a set of data to display each node on the timeline. The data should include the title, content, pictures and other information of each node, as well as the timestamp corresponding to each node. For example:

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. Calculate node position

Next, we need to calculate the position of each node on the timeline. Since this timeline is an irregular timeline, it is necessary to consider the different positions of each node. We can use the following formula to calculate the position of the node on the timeline:

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

Among them, minTimestamp and maxTimestamp represent the minimum and maximum timestamps in the data; minPosition and maxPosition represent the leftmost and rightmost positions of the timeline; position represents the position of the node on the timeline.

3. Rendering nodes

Now that we have obtained the position of each node on the timeline, the next step is to render the node onto the page. We can use the following code to render each node:

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

In the above code, we first use the $.each() method to traverse the data array, and then calculate the time of each node position on the axis. Next, we use the $() method to create a node and set the node's style and content. Finally, add the node to the page.

4. Implement node click event

Finally, we can implement a node click event to expand or collapse the content of the node. For specific implementation methods, please refer to the following code:

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

In the above code, we use the .click() method to add a click event processing function to the node, and determine the content of the node when the node is clicked. Whether it has been expanded. If it has been expanded, use the .slideUp() method to collapse it; otherwise, use the .slideDown() method to expand it.

So far, we have successfully implemented a simple irregular timeline. In practical applications, more interaction details and optimization content need to be considered.

The above is the detailed content of jquery irregular timeline. For more information, please follow other related articles on the PHP Chinese website!