Erstellen Sie eine reaktionsfähige horizontale Zeitleiste basierend auf jQuery und CSS3 mit dem Quellcode download_jquery

Wir sehen oft viele vertikale Zeitleisten, die zur Aufzeichnung des Fortschritts von Ereignissen verwendet werden, und ein Freund hat mich gebeten, eine horizontale Zeitleiste zu teilen. Tatsächlich besteht die Schwierigkeit bei der horizontalen Zeitleiste darin, dass sie sich an die Bildschirmgröße anpasst. Was ich heute mit Ihnen teilen möchte, ist eine horizontale Zeitleiste, die Reaktionsfähigkeit und das Verschieben von Touchscreen-Gesten unterstützt.

Effektanzeige Quellcode-Download

HTML

Unsere HTML-Struktur besteht aus zwei Teilen: div.timeline wird verwendet, um horizontale Linien für die Datumsnavigation zu platzieren. Sie besteht aus horizontalen mehreren Datumsangaben, div.events-wrapper und horizontalen Navigationsschaltflächen für die linke und rechte Achse, ul.cd-timeline-navigation. Der div.events-content platziert Ereignisknoten, die mehreren Daten entsprechen. Er besteht aus mehreren li-Elementen. Jeder HTML-Inhalt wie Bilder und Text kann im li-Element platziert werden. Beachten Sie, dass es in der li dieser beiden Teile von HTML ein Datumsattribut gibt. Über das Datendatumsattribut wird die horizontale Navigationslinie mit dem dem Datum entsprechenden Ereignisinhalt verknüpft.

<section class="cd-horizontal-timeline"> 
 <div class="timeline"> 
  <div class="events-wrapper"> 
   <div class="events"> 
    <ol> 
     <li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li> 
     <li><a href="#0" data-date="28/02/2014">28 Feb</a></li> 
     <!-- 多个日期 --> 
    </ol> 
    <span class="filling-line" aria-hidden="true"></span> 
   </div> <!-- .events --> 
  </div> <!-- .events-wrapper --> 
  <ul class="cd-timeline-navigation"> 
   <li><a href="#0" class="prev inactive">Prev</a></li> 
   <li><a href="#0" class="next">Next</a></li> 
  </ul> <!-- .cd-timeline-navigation --> 
 </div> <!-- .timeline --> 
 <div class="events-content"> 
  <ol> 
   <li class="selected" data-date="16/01/2014"> 
    <h2>标题</h2> 
    <em>January 16th, 2014</em> 
    <p>  
     文字或者图片等任意HTML内容 
    </p> 
   </li> 
   <li data-date="28/02/2014"> 
    <!-- 对应日期的事件描述信息 --> 
   </li> 
   <!-- 多个日期事件 --> 
  </ol> 
 </div> 
</section> 

CSS

Wenn man sich das CSS-Design von Zeitleistenereignissen ansieht, liegen alle Ereignisknoten zunächst außerhalb der Ansicht und sind nicht sichtbar, mit Ausnahme des aktuell ausgewählten Datumsknotens von .selected. Wir verwenden .enter-right/.enter-left, um eine Animation hinzuzufügen, wenn der Ereignisknoten die Ansicht betritt, und verwenden .leave-right/.leave-left, um eine Animation hinzuzufügen, wenn der Ereignisknoten die Ansicht verlässt. Dieses Beispiel verwendet viele CSS3-Animationseffekte, siehe Code:

.cd-horizontal-timeline .events-content { 
 position: relative; 
} 
.cd-horizontal-timeline .events-content li { 
 position: absolute; 
 z-index: 1; 
 width: 100%; 
 left: 0; 
 top: 0; 
 transform: translateX(-100%); 
 opacity: 0; 
 animation-duration: 0.4s; 
 animation-timing-function: ease-in-out; 
} 
.cd-horizontal-timeline .events-content li.selected { 
 /* visible event content */ 
 position: relative; 
 z-index: 2; 
 opacity: 1; 
 transform: translateX(0); 
} 
.cd-horizontal-timeline .events-content li.enter-right, 
.cd-horizontal-timeline .events-content li.leave-right { 
 animation-name: cd-enter-right; 
} 
.cd-horizontal-timeline .events-content li.enter-left, 
.cd-horizontal-timeline .events-content li.leave-left { 
 animation-name: cd-enter-left; 
} 
.cd-horizontal-timeline .events-content li.leave-right, 
.cd-horizontal-timeline .events-content li.leave-left { 
 animation-direction: reverse; 
} 
@keyframes cd-enter-right { 
 0% { 
 opacity: 0; 
 transform: translateX(100%); 
 } 
 100% { 
 opacity: 1; 
 transform: translateX(0%); 
 } 
} 
@keyframes cd-enter-left { 
 0% { 
 opacity: 0; 
 transform: translateX(-100%); 
 } 
 100% { 
 opacity: 1; 
 transform: translateX(0%); 
 } 
} 

JS

Passen Sie in main.js den Abstand zwischen den beiden Datumsknoten in der Datumsnavigationsleiste entsprechend der Länge des Intervalls zwischen jeweils zwei Datumsangaben an. Natürlich müssen Sie einen Mindestwert (px) festlegen und das Datum abrufen basierend auf dem data-date-Attribut und formatieren Sie das Datum. Verwenden Sie jQuery, um den Gleiteffekt von Ereignisinhalten zu realisieren, indem Sie auf die linke und rechte Navigationsschaltfläche klicken. Da der spezifische Code relativ groß ist, nimmt er hier keinen Platz ein. Laden Sie den Quellcode herunter, um die Codedetails in main.js anzuzeigen . Sie können es direkt anwenden, ohne Änderungen vorzunehmen.