jquery garis masa tidak teratur

garis masa jquery tidak teratur

Garis masa ialah cara biasa untuk memaparkan data, biasanya digunakan untuk menunjukkan perkembangan topik tertentu atau susunan kronologi peristiwa. Dalam pembangunan bahagian hadapan, kita boleh menggunakan jQuery untuk melaksanakan garis masa yang tidak teratur Mengambil proses pembangunan topik tertentu sebagai contoh, berikut adalah langkah-langkah untuk melaksanakannya.

1. Bina data

Pertama, kita perlu membina satu set data untuk memaparkan setiap nod pada garis masa. Data hendaklah termasuk tajuk, kandungan, gambar dan maklumat lain bagi setiap nod, serta cap waktu yang sepadan dengan setiap nod. Contohnya:

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. Kira kedudukan nod

Seterusnya, kita perlu mengira kedudukan setiap nod pada garis masa. Memandangkan garis masa ini adalah garis masa yang tidak teratur, adalah perlu untuk mempertimbangkan kedudukan yang berbeza bagi setiap nod. Kita boleh menggunakan formula berikut untuk mengira kedudukan nod pada garis masa:

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

di mana, minTimestamp dan maxTimestamp mewakili cap masa minimum dan maksimum dalam data minPosition dan maxPosition mewakili Kedudukan paling kiri dan paling kanan garis masa position mewakili kedudukan nod pada garis masa.

3. Render nod

Sekarang kita telah memperoleh kedudukan setiap nod pada garis masa, langkah seterusnya ialah untuk memaparkan nod ke halaman. Kita boleh menggunakan kod berikut untuk memaparkan setiap nod:

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

Dalam kod di atas, kami mula-mula menggunakan kaedah $.each() untuk melintasi tatasusunan data, dan kemudian mengira kedudukan setiap nod pada garis masa. Seterusnya, kami menggunakan kaedah $() untuk mencipta nod dan menetapkan gaya dan kandungan nod. Akhir sekali, tambahkan nod pada halaman.

4. Laksanakan acara klik nod

Akhir sekali, kami boleh melaksanakan acara klik nod untuk mengembangkan atau meruntuhkan kandungan nod. Untuk pelaksanaan khusus, sila rujuk kod berikut:

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

Dalam kod di atas, kami menggunakan kaedah .click() untuk menambah fungsi pemprosesan acara klik pada nod Apabila nod diklik, ia dinilai sama ada kandungan nod telah dikembangkan. Jika ia telah dikembangkan, gunakan kaedah .slideUp() untuk meruntuhkannya; jika tidak, gunakan kaedah .slideDown() untuk mengembangkannya.

Pada ketika ini, kami telah berjaya melaksanakan garis masa mudah yang tidak teratur. Dalam aplikasi praktikal, lebih banyak butiran interaksi dan kandungan pengoptimuman perlu dipertimbangkan.

Atas ialah kandungan terperinci jquery garis masa tidak teratur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!