So erstellen Sie eine dynamische Zeitleiste mit HTML, CSS und jQuery-js-Tutorial-php.cn

Inhaltsverzeichnis

事件3

Heim

Web-Frontend

js-Tutorial

So erstellen Sie eine dynamische Zeitleiste mit HTML, CSS und jQuery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 24, 2023 am 09:31 AM

css html 时间轴

So erstellen Sie eine dynamische Zeitleiste mit HTML, CSS und jQuery

Um mit HTML, CSS und jQuery eine dynamische Zeitleiste zu erstellen, sind bestimmte Codebeispiele erforderlich.

Die Zeitleiste ist eine gängige Methode zur Anzeige der chronologischen Abfolge und des Ereignisflusses und eignet sich sehr gut zur Anzeige historischer Ereignisse und des Projektfortschritts Warten. Mithilfe der HTML-, CSS- und jQuery-Technologie können Sie ganz einfach einen dynamischen Timeline-Effekt erstellen. In diesem Artikel wird erläutert, wie Sie mit diesen Techniken einen einfachen Timeline-Effekt erzielen, und es werden spezifische Codebeispiele bereitgestellt.

Zuerst müssen wir eine grundlegende Timeline-Struktur in HTML erstellen. Das Folgende ist ein Codebeispiel:

<!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 id="事件">事件1</h2>
                    <p>事件1的详细描述</p>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-item-content">
                    <h2 id="事件">事件2</h2>
                    <p>事件2的详细描述</p>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-item-content">
                    <h2 id="事件">事件3</h2>
                    <p>事件3的详细描述</p>
                </div>
            </div>
        </div>
        <div class="timeline-progress"></div>
    </div>
</body>
</html>

Nach dem Login kopieren

Im obigen HTML-Code haben wir einen .timeline-Container erstellt, der einen .timeline-items-Container und einen enthält .timeline-progressFortschrittsbalken. Der Container .timeline-items wird verwendet, um Ereignisse auf der Zeitleiste zu platzieren. Jedes Ereignis wird durch .timeline-item dargestellt, und die Details des Ereignisses werden in .timeline-item-contentcontainer. .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%);
}

Nach dem Login kopieren

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

Als nächstes verwenden wir CSS-Stile, um das Erscheinungsbild der Zeitleiste zu verschönern. Das Folgende ist ein Codebeispiel:

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

Nach dem Login kopieren

Im obigen CSS-Code legen wir den Grundstil des .timeline-Containers fest und verschönern .timeline-item und . Das Erscheinen von timeline-progress.

Abschließend verwenden wir jQuery, um die Zeitleiste dynamisch zu gestalten. Das Folgende ist ein Codebeispiel:

rrreee

Im obigen JavaScript-Code verwenden wir die jQuery-Bibliothek, um dynamische Effekte zu erzielen. Insbesondere haben wir das Scroll-Ereignis abgehört, die Position des Fortschrittsbalkens basierend auf der Scroll-Distanz und der Höhe der Seite berechnet und die Höhe des Fortschrittsbalkens in Echtzeit aktualisiert. 🎜🎜Mit den oben genannten HTML-, CSS- und jQuery-Codes haben wir erfolgreich einen dynamischen Timeline-Effekt implementiert. Sie können den Stil und den Ereignisinhalt entsprechend Ihren eigenen Anforderungen ändern, um die Zeitleiste besser an Ihre tatsächliche Anwendung anzupassen. Ich hoffe, dieser Artikel ist hilfreich für Sie! 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine dynamische Zeitleiste mit HTML, CSS und jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Will R.E.P.O. Crossplay haben?

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7562

CakePHP-Tutorial

1384

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Apr 08, 2025 pm 07:05 PM

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch Apr 12, 2025 am 12:02 AM

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen

See all articles