jQuery Timelinr melaksanakan pemalam garis masa menegak dan mendatar (dengan muat turun kod sumber)_jquery

jquery.timelinr.js ialah pemalam garis masa jQuery dengan kesan yang sangat hebat. jquery.timelinr boleh mencipta kesan garis masa mendatar dan menegak dan boleh melakukan main balik automatik. Anda boleh mengawal kesan animasi setiap suis garis masa melalui parameter.

Bacaan yang disyorkan: Saya telah berkongsi kod sumber jQuery untuk melaksanakan sejarah ringkas kesan khas garis masa pembangunan korporat Kesan paparan antara mukanya sangat baik.

Paparan kesan Muat turun kod sumber

Cara menggunakan

Menggunakan pemalam garis masa ini memerlukan pengenalan fail jQuery dan jquery.timelinr.js ke dalam halaman.

<script src="js/jquery-1.x.x.min.js"></script>
<script src="js/jquery.timelinr-0.9.x.js"></script>

Struktur HTML

Struktur HTML asas pemalam garis masa adalah seperti berikut:

<div id="timeline">
<ul id="dates">
<li><a href="#">date1</a></li>
<li><a href="#">date2</a></li>
</ul>
<ul id="issues">
<li id="date1">
<p>Lorem ipsum.</p>
</li>
<li id="date2">
<p>Lorem ipsum.</p>
</li>
</ul>
<a href="#" id="next">+</a> <!-- optional -->
<a href="#" id="prev">-</a> <!-- optional -->
</div>

Pemalam permulaan

Selepas elemen DOM halaman dimuatkan, anda boleh memulakan pemalam garis masa melalui kaedah berikut.

$(function(){
$().timelinr();
});

Parameter konfigurasi

Parameter konfigurasi pemalam garis masa jquery.timelinr.js ialah:

orientasi: arah garis masa Nilai pilihan ialah: mendatar |.
containerDiv: pemilih ID DIV bekas garis masa. Lalai: '#garis masa'.
datesDiv: pemilih ID bekas yang memaparkan masa. Lalai: '#dates'.
datesSelectedClass: Kelas masa yang dipilih pada masa ini. Nilai lalai ialah: 'dipilih'.
datesSpeed: Kelajuan animasi garis masa. Nilai dari 100-1000, atau 'lambat', 'biasa', 'cepat'. Nilai lalai ialah: 'normal'.
issuesDiv: Pemilih ID bagi DIV penerangan maklumat. Lalai: '#isu'.
issuesSelectedClass: Kelas DIV yang diterangkan oleh maklumat yang dipilih pada masa ini. Nilai lalai ialah: 'dipilih'.
issuesSpeed: Maklumat yang menerangkan kelajuan animasi DIV. Nilai dari 100-1000, atau 'lambat', 'biasa', 'cepat'. Nilai lalai ialah: 'cepat'.
isuKetelusan: Ketelusan DIV yang diterangkan oleh maklumat. Nilai antara 0-1, nilai lalai ialah 0.2.
isuTransparencySpeed: Kepantasan animasi ketelusan. Nilai julat dari 100-1000, lalai ialah 500.
prevButton: Pemilih ID untuk butang hadapan. Lalai: '#prev'.
NextButton: Pemilih ID untuk butang seterusnya. Lalai: '#next'.
arrowKeys: Sama ada untuk membenarkan kawalan papan kekunci. Lalai: palsu.
startAt: subskrip indeks permulaan, lalai ialah 1.
autoPlay: sama ada untuk bermain secara automatik. Lalai kepada 'palsu'.
autoPlayDirection: Arah main balik automatik. Nilai pilihan ialah: ke hadapan |. Nilai lalai ialah: 'ke hadapan'.
autoPlayPause: Selang autoplay. Nilai integer, 1000 = 1 saat, lalai ialah 2000.
Alamat github bagi pemalam garis masa jquery.timelinr.js ialah: https://github.com/juanbrujo/jQuery-Timelinr

Di atas adalah mengenai pelaksanaan jQuery Timelinr bagi pemalam garis masa menegak dan mendatar saya harap ia akan membantu semua orang.