jQueryの不規則なタイムライン

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 は、タイムライン内の最小タイムスタンプと最大タイムスタンプを表します。データ。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() メソッドを使用して展開します。

これまでのところ、単純な不規則なタイムラインの実装に成功しています。実際のアプリケーションでは、より多くのインタラクションの詳細と最適化コンテンツを考慮する必要があります。

以上がjQueryの不規則なタイムラインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。