jquery 불규칙한 타임 라인-프런트엔드 Q&A-php.cn

jquery 불규칙한 타임 라인

WBOY

풀어 주다： 2023-05-23 12:37:06

원래의

648명이 탐색했습니다.

jquery 불규칙한 타임라인

타임라인은 데이터를 표시하는 일반적인 방법으로, 일반적으로 특정 주제의 전개나 사건의 연대순 순서를 표시하는 데 사용됩니다. 프론트 엔드 개발에서는 jQuery를 사용하여 불규칙한 타임라인을 구현할 수 있습니다. 특정 주제의 개발 프로세스를 예로 들면 다음과 같은 구현 단계가 있습니다.

1. 데이터 구성

먼저 타임라인에 각 노드를 표시할 데이터 세트를 구성해야 합니다. 데이터에는 각 노드의 제목, 내용, 사진 및 기타 정보와 각 노드에 해당하는 타임스탬프가 포함되어야 합니다. 예:

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. 노드 위치 계산

다음으로 타임라인에서 각 노드의 위치를 계산해야 합니다. 이 타임라인은 불규칙한 타임라인이므로 각 노드의 서로 다른 위치를 고려해야 합니다. 다음 공식을 사용하여 타임라인에서 노드의 위치를 계산할 수 있습니다.

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

로그인 후 복사

여기서 minTimestamp 및 maxTimestamp는 데이터의 최소 및 최대 타임스탬프를 나타냅니다. code >minPosition 및 maxPosition은 타임라인의 가장 왼쪽과 가장 오른쪽 위치를 나타내고, position은 타임라인의 노드 위치를 나타냅니다. 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. 노드 렌더링

이제 타임라인에서 각 노드의 위치를 얻었으므로 다음 단계는 노드를 페이지에 렌더링하는 것입니다. 다음 코드를 사용하여 각 노드를 렌더링할 수 있습니다. 🎜rrreee🎜위 코드에서는 먼저 $.each() 메서드를 사용하여 데이터 배열을 순회한 다음 각 노드의 값을 계산합니다. 타임라인 위치에 있습니다. 다음으로 $() 메서드를 사용하여 노드를 생성하고 노드의 스타일과 콘텐츠를 설정합니다. 마지막으로 페이지에 노드를 추가합니다. 🎜🎜4. 노드 클릭 이벤트 구현🎜🎜마지막으로 노드 콘텐츠를 확장하거나 축소하는 노드 클릭 이벤트를 구현할 수 있습니다. 구체적인 구현은 다음 코드를 참고하세요. 🎜rrreee🎜위 코드에서는 노드가 클릭되었을 때 클릭 이벤트 처리 기능을 추가하기 위해 .click() 메서드를 사용했습니다. , 노드의 내용이 확장되었는지 여부를 판단합니다. 확장된 경우 .slideUp() 메서드를 사용하여 축소하고, 그렇지 않으면 .slideDown() 메서드를 사용하여 확장합니다. 🎜🎜이 시점에서 우리는 간단한 불규칙 타임라인을 성공적으로 구현했습니다. 실제 적용에서는 더 많은 상호 작용 세부 사항과 최적화 콘텐츠를 고려해야 합니다. 🎜

위 내용은 jquery 불규칙한 타임 라인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!