Créez une chronologie horizontale réactive basée sur jQuery et CSS3 avec le code source download_jquery

On voit souvent beaucoup de chronologies verticales utilisées pour enregistrer la progression des événements, et un ami m'a demandé de partager une chronologie horizontale. En fait, la difficulté avec la chronologie horizontale est qu'elle s'adapte à la taille de l'écran. Ce que je souhaite donc partager avec vous aujourd'hui, c'est une chronologie horizontale qui prend en charge la réactivité et le glissement gestuel de l'écran tactile.

Affichage de l'effet Téléchargement du code source

HTML

Notre structure HTML se compose de deux parties. div.timeline est utilisée pour placer des lignes horizontales de navigation par date. Elle se compose de plusieurs dates horizontales div.events-wrapper et de boutons de navigation à axe horizontal gauche et droit ul.cd-timeline-navigation. Le div.events-content place les nœuds d'événements correspondant à plusieurs dates. Il est composé de plusieurs éléments li. Tout contenu HTML tel que des images et du texte peut être placé dans l'élément li. A noter qu'il existe un attribut data-date dans le li de ces deux parties du HTML. Sa valeur est une date. C'est via l'attribut data-date que la ligne horizontale de navigation est associée au contenu de l'événement correspondant à la date.

<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

En regardant la conception CSS des événements de la chronologie, tous les nœuds d'événements sont initialement en dehors de la vue et ne peuvent pas être vus, à l'exception du nœud de date actuellement sélectionné de .selected. Nous utilisons .enter-right/.enter-left pour ajouter une animation lorsque le nœud d'événement entre dans la vue, et utilisons .leave-right/.leave-left pour ajouter une animation lorsque le nœud d'événement quitte la vue. Cet exemple utilise beaucoup d'effets d'animation CSS3, veuillez consulter le 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

Dans main.js, ajustez la distance entre les deux nœuds de date sur la barre de navigation de date en fonction de la longueur de l'intervalle entre chacune des deux dates. Bien sûr, vous devez définir une valeur minimale (px) et obtenir la date. en fonction de l'attribut data-date et formatez la date. Utilisez jQuery pour réaliser l'effet coulissant du contenu de l'événement en cliquant sur les boutons de navigation gauche et droit. Étant donné que le code spécifique est relativement volumineux, il ne prendra pas de place ici. Veuillez télécharger le code source pour afficher les détails du code dans main.js. . Vous pouvez l'appliquer directement sans apporter de modifications. Accédez à votre projet.