Cara membuat garis masa dinamik menggunakan HTML, CSS dan jQuery-tutorial js-php.cn

Cara membuat garis masa dinamik menggunakan HTML, CSS dan jQuery

WBOY

Lepaskan： 2023-10-24 09:31:58

asal

816 orang telah melayarinya

Cara membuat garis masa dinamik menggunakan HTML, CSS dan jQuery

Cara menggunakan HTML, CSS dan jQuery untuk membuat garis masa yang dinamik, contoh kod khusus diperlukan

Garis masa ialah paparan kronologi dan kaedah aliran peristiwa sangat sesuai untuk memaparkan peristiwa sejarah, kemajuan projek, dll. Menggunakan teknologi HTML, CSS dan jQuery, anda boleh mencipta kesan garis masa dinamik dengan mudah. Artikel ini akan memperkenalkan cara menggunakan teknik ini untuk mencapai kesan garis masa yang mudah dan memberikan contoh kod khusus.

Pertama, kita perlu mencipta struktur garis masa asas dalam HTML. Berikut ialah contoh kod:

<!DOCTYPE html>
<html>
<head>
    <title>动态时间轴</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="timeline">
        <div class="timeline-items">
            <div class="timeline-item">
                <div class="timeline-item-content">
                    <h2>事件1</h2>
                    <p>事件1的详细描述</p>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-item-content">
                    <h2>事件2</h2>
                    <p>事件2的详细描述</p>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-item-content">
                    <h2>事件3</h2>
                    <p>事件3的详细描述</p>
                </div>
            </div>
        </div>
        <div class="timeline-progress"></div>
    </div>
</body>
</html>

Salin selepas log masuk

Dalam kod HTML di atas, kami mencipta bekas .timeline, yang mengandungi .timeline-items Bekas dan bar kemajuan .timeline-progress. Bekas .timeline-item digunakan untuk meletakkan acara pada garis masa Setiap acara diwakili oleh .timeline-item dan butiran acara diletakkan dalam .garis masa- item-kandunganbekas. .timeline容器，里面包含了一个.timeline-items容器和一个.timeline-progress进度条。.timeline-items容器用来放置时间轴上的事件，每个事件用.timeline-item表示，事件的详细内容放在.timeline-item-content容器中。

接下来，我们使用CSS样式来美化时间轴的外观。以下是代码示例：

.timeline {
  position: relative;
  margin: 50px auto;
  width: 800px;
}

.timeline-items {
  position: relative;
}

.timeline-item {
  position: relative;
  margin-bottom: 50px;
  padding: 20px;
  background: #f1f1f1;
}

.timeline-item-content {
  display: inline-block;
  vertical-align: top;
}

.timeline-progress {
  position: absolute;
  width: 4px;
  background: #666;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

Salin selepas log masuk

上面的CSS代码中，我们设置了.timeline容器的基本样式，并美化了.timeline-item和.timeline-progress

Seterusnya, kami menggunakan gaya CSS untuk mencantikkan penampilan garis masa. Berikut ialah contoh kod:

$(document).ready(function() {
  var timelineItems = $(".timeline-items .timeline-item");
  var progress = $(".timeline-progress");

  // 设置进度条的初始位置
  progress.css("height", timelineItems.length * 100);

  // 监听滚动事件，更新进度条位置
  $(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    var windowHeight = $(this).height();
    var documentHeight = $(document).height();
    var timelineOffset = $(".timeline").offset().top;

    var progressHeight = windowHeight * ((scrollTop - timelineOffset) / (documentHeight - windowHeight));

    progress.css("top", scrollTop - timelineOffset);
    progress.css("height", progressHeight);
  });
});

Salin selepas log masuk

Dalam kod CSS di atas, kami menetapkan gaya asas bekas .timeline dan mencantikkan .timeline-item dan kemunculan <code>.timeline-progress.

Akhir sekali, kami menggunakan jQuery untuk menjadikan garis masa dinamik. Berikut ialah contoh kod:

rrreee

Dalam kod JavaScript di atas, kami menggunakan perpustakaan jQuery untuk mencapai kesan dinamik. Secara khusus, kami mendengar acara tatal, mengira kedudukan bar kemajuan berdasarkan jarak tatal dan ketinggian halaman, dan mengemas kini ketinggian bar kemajuan dalam masa nyata. #🎜🎜##🎜🎜#Dengan kod HTML, CSS dan jQuery di atas, kami telah berjaya mencapai kesan garis masa yang dinamik. Anda boleh mengubah suai gaya dan kandungan acara mengikut keperluan anda sendiri untuk menjadikan garis masa lebih konsisten dengan aplikasi sebenar anda. Semoga artikel ini dapat membantu anda! #🎜🎜#

Atas ialah kandungan terperinci Cara membuat garis masa dinamik menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!