Pemalam jQuery Timelinr melaksanakan effect_jquery garis masa

Kata Pengantar

Ini ialah pemalam garis masa yang boleh digunakan untuk memaparkan sejarah dan rancangan Ia amat sesuai untuk sesetengah tapak web untuk memaparkan proses pembangunan, acara utama, dsb. Pemalam ini adalah berdasarkan jQuery dan boleh beralih slaid, menatal mendatar dan menegak, serta menyokong kekunci anak panah papan kekunci. Selepas pengembangan, ia boleh menyokong acara roda tetikus.

HTML

Kami mencipta div #garis masa dalam badan sebagai kawasan paparan, #tarikh ialah garis masa, dalam contoh kami menggunakan tahun sebagai paksi utama, #isu sebagai kawasan paparan kandungan, iaitu memaparkan kandungan yang sepadan dengan tahun titik paksi utama, perhatikan ID yang sepadan.

<div id="timeline"> 
  <ul id="dates"> 
   <li><a href="#2011">2011</a></li> 
   <li><a href="#2012">2012</a></li> 
  </ul> 
  <ul id="issues"> 
   <li id="2011"> 
     <p>Lorem ipsum.</p> 
   </li> 
   <li id="2012"> 
     <p>分享生活 留住感动</p> 
   </li> 
  </ul> 
  <a href="#" id="next">+</a> <!-- optional --> 
  <a href="#" id="prev">-</a> <!-- optional --> 
</div> 

jQuery Timelinr bergantung pada jQuery, jadi perpustakaan jQuery dan pemalam jQuery Timelinr mesti dimuatkan dalam html terlebih dahulu.

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.timelinr-0.9.53.js"></script>

css

Seterusnya, gunakan CSS untuk reka letak Anda boleh menetapkan CSS yang berbeza untuk mengawal sama ada garis masa disusun secara mendatar atau menegak Anda boleh memainkannya secara bebas mengikut keperluan anda. Berikut ialah susunan menegak menatal.

#timeline {width: 760px;height: 440px;overflow: hidden;margin: 40px auto; 
position: relative;background: url('dot.gif') 110px top repeat-y;} 
#dates {width: 115px;height: 440px;overflow: hidden;float: left;} 
#dates li {list-style: none;width: 100px;height: 100px;line-height: 100px;font-size: 24px; 
 padding-right:20px; text-align:right; background: url('biggerdot.png') 108px center no-repeat;} 
#dates a {line-height: 38px;padding-bottom: 10px;} 
#dates .selected {font-size: 38px;} 
#issues {width: 630px;height: 440px;overflow: hidden;float: right;}   
#issues li {width: 630px;height: 440px;list-style: none;} 
#issues li h1 {color: #ffcc00;font-size: 42px; height:52px; line-height:52px; 
 text-shadow: #000 1px 1px 2px;} 
#issues li p {font-size: 14px;margin: 10px;line-height: 26px;} 

jQuery

Memanggil pemalam garis masa adalah sangat mudah, laksanakan kod berikut:

$(function(){ 
  $().timelinr({ 
      orientation:'vertical' 
  }); 
});

jQuery Timelinr menyediakan banyak pilihan boleh dikonfigurasikan yang boleh ditetapkan mengikut keperluan anda. Seperti yang ditunjukkan dalam gambar:

Sokong pemacu roller

Selain itu, jQuery Timelinr semasa tidak menyokong pemacu roda tetikus Malah, kita boleh memanjangkan sedikit pemalam untuk menyokong pemacu roda tetikus Di sini kita perlu menggunakan pemalam masa roda: jquery.mousewheel. js

Selepas memuat turun pemalam, importnya pada halaman:

a05b1259f35e46dd590d9e75e10ac8682cacc6d41bbb37262a98f745aa00fbf0

Kemudian, ubah suai jquery.timelinr-0.9.53.js dan tambah kod berikut pada kira-kira baris 260:

//--------------Added by helloweba.com 20130326---------- 
if(settings.mousewheel=="true") { //支持滚轮 
  $(settings.containerDiv).mousewheel(function(event, delta, deltaX, deltaY){ 
    if(delta==1){ 
      $(settings.prevButton).click(); 
    }else{ 
      $(settings.nextButton).click(); 
    } 
  }); 
} 

Kami telah menyekat butang prevButton dan nextButton dalam contoh Apabila acara roda ditetapkan untuk menyokong, roda ke atas adalah bersamaan dengan mengklik PrevButton dan roda ke bawah adalah bersamaan dengan mengklik NextButton.

Akhir sekali, selepas menggunakan kod berikut, keseluruhan garis masa boleh menyokong acara roda

$(function(){ 
  $().timelinr({ 
    mousewheel:  'true' 
  }); 
});