소스 코드 download_jquery를 사용하여 jQuery 및 CSS3를 기반으로 반응형 수평 타임라인 생성

이벤트 진행 상황을 기록하는 데 세로 타임라인을 많이 사용하는 경우가 있는데, 친구가 가로 타임라인을 공유해달라고 요청했습니다. 사실 가로 타임라인의 어려움은 화면 크기에 맞춰 조정된다는 점입니다. 그래서 오늘 여러분과 공유하고 싶은 것은 반응성과 터치스크린 제스처 슬라이딩을 지원하는 수평 타임라인입니다.

효과 표시 소스 코드 다운로드

HTML

우리의 HTML 구조는 두 부분으로 구성됩니다. div.timeline은 날짜 탐색 가로선을 배치하는 데 사용됩니다. 이는 가로 다중 날짜 div.events-wrapper와 가로축 왼쪽 및 오른쪽 탐색 버튼 ul.cd-timeline-navigation으로 구성됩니다. div.events-content는 여러 날짜에 해당하는 이벤트 노드를 배치합니다. 이는 여러 li 요소로 구성됩니다. 그림 및 텍스트와 같은 HTML 콘텐츠는 li 요소에 배치될 수 있습니다. HTML의 두 부분 중 li에는 데이터 날짜 속성이 있습니다. 해당 값은 데이터 날짜 속성을 통해 탐색 가로선이 날짜에 해당하는 이벤트 콘텐츠와 연결됩니다.

<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

타임라인 이벤트의 CSS 디자인을 살펴보면 현재 선택된 날짜 노드인 .selected를 제외하고 모든 이벤트 노드는 처음에는 뷰 외부에 있어 볼 수 없습니다. 이벤트 노드가 뷰에 들어갈 때 애니메이션을 추가하기 위해 .enter-right/.enter-left를 사용하고, 이벤트 노드가 뷰를 떠날 때 애니메이션을 추가하기 위해 .leave-right/.leave-left를 사용합니다. 이 예에서는 CSS3 애니메이션 효과를 많이 사용합니다. 코드를 참조하세요.

.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

main.js에서는 각 두 날짜 사이의 간격 길이에 따라 날짜 탐색 모음에서 두 날짜 노드 사이의 거리를 조정합니다. 물론 최소값(px)을 설정하고 날짜를 가져와야 합니다. data-date 속성을 기반으로 날짜 형식을 지정합니다. jQuery를 사용하면 왼쪽 및 오른쪽 탐색 버튼을 클릭하여 이벤트 콘텐츠의 슬라이딩 효과를 구현할 수 있습니다. 특정 코드는 상대적으로 크기 때문에 여기에서 소스 코드를 다운로드하여 main.js에서 코드 세부정보를 확인하세요. . 수정 없이 바로 적용할 수 있습니다.