Buat garis masa mendatar responsif berdasarkan jQuery dan CSS3 dengan kod sumber download_jquery

Kami sering melihat banyak garis masa menegak yang digunakan untuk merekodkan kemajuan acara, dan seorang rakan meminta saya berkongsi garis masa mendatar Sebenarnya, kesukaran dengan garis masa mendatar ialah ia menyesuaikan dengan saiz skrin. Jadi apa yang saya ingin kongsikan dengan anda hari ini ialah garis masa mendatar yang menyokong responsif dan gelongsor gerak isyarat skrin sentuh.

Paparan kesan Muat turun kod sumber

HTML

Struktur HTML kami terdiri daripada dua bahagian div.timeline digunakan untuk meletakkan navigasi tarikh garisan mendatar Ia terdiri daripada berbilang tarikh div.events-wrapper dan butang navigasi kiri dan kanan paksi ul.cd-garis masa. Div.events-content meletakkan nod acara yang sepadan dengan berbilang tarikh Ia terdiri daripada berbilang elemen li Sebarang kandungan HTML seperti gambar dan teks boleh diletakkan dalam elemen li. Ambil perhatian bahawa terdapat atribut data-date dalam li dua bahagian HTML ini. Nilainya ialah tarikh Ia adalah melalui atribut data-date bahawa garis mendatar navigasi dikaitkan dengan kandungan acara yang sepadan dengan tarikh.

<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

Melihat reka bentuk CSS acara garis masa, semua nod acara pada mulanya berada di luar paparan dan tidak dapat dilihat, kecuali untuk nod tarikh yang dipilih pada masa ini .selected. Kami menggunakan .enter-right/.enter-left untuk menambah animasi apabila nod acara memasuki paparan, dan menggunakan .leave-right/.leave-left untuk menambah animasi apabila nod acara meninggalkan paparan. Contoh ini menggunakan banyak kesan animasi CSS3, sila lihat kod:

.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

Dalam main.js, laraskan jarak antara dua nod tarikh pada bar navigasi tarikh mengikut panjang selang antara setiap dua tarikh Sudah tentu, anda perlu menetapkan nilai minimum (px) dan dapatkan tarikh berdasarkan atribut data-date , dan format tarikh. Gunakan jQuery untuk merealisasikan kesan gelongsor kandungan acara dengan mengklik pada butang navigasi kiri dan kanan Memandangkan kod tertentu agak besar, ia tidak akan mengambil ruang di sini Sila muat turun kod sumber untuk melihat butiran kod dalam main.js . Anda boleh terus menggunakannya tanpa membuat sebarang pengubahsuaian Pergi ke projek anda.