Le plug-in jQuery Timelinr implémente les effets de chronologie_jquery

Avant-propos

Il s'agit d'un plug-in de chronologie qui peut être utilisé pour afficher l'historique et les plans. Il est particulièrement adapté à certains sites Web pour afficher les processus de développement, les événements majeurs, etc. Ce plug-in est basé sur jQuery et peut changer de curseur, faire défiler horizontalement et verticalement et prend en charge les touches fléchées du clavier. Après expansion, il peut prendre en charge les événements de la molette de la souris.

HTML

Nous créons une div #timeline dans le corps comme zone d'affichage, #dates est la chronologie, dans l'exemple nous utilisons l'année comme axe principal, #issues comme zone d'affichage du contenu, c'est-à-dire que nous affichons le contenu correspondant à L'année du point de l'axe principal, faites attention à l'ID correspondant.

<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 dépend de jQuery, donc la bibliothèque jQuery et le plug-in jQuery Timelinr doivent d'abord être chargés en HTML.

<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

Ensuite, utilisez CSS pour la mise en page. Vous pouvez définir différents CSS pour contrôler si la chronologie est disposée horizontalement ou verticalement. Vous pouvez la lire librement selon vos besoins. défilement.

#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

Appeler le plug-in timeline est très simple, exécutez le code suivant :

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

jQuery Timelinr propose de nombreuses options configurables qui peuvent être définies en fonction de vos besoins. Comme le montre l'image :

Entraînement du rouleau de support

De plus, le jQuery Timelinr actuel ne prend pas en charge le pilote de la molette de la souris. En fait, nous pouvons légèrement étendre le plug-in pour prendre en charge le pilote de la molette de la souris. Ici, nous devons utiliser le plug-in de la molette de la souris : jquery.mousewheel. js

Après avoir téléchargé le plug-in, importez-le sur la page :

Ensuite, modifiez jquery.timelinr-0.9.53.js et ajoutez le code suivant vers la ligne 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(); 
    } 
  }); 
} 

Nous avons bloqué les boutons prevButton et nextButton dans l'exemple lorsque l'événement wheel est défini sur support, la molette vers le haut équivaut à cliquer sur le prevButton, et la molette vers le bas équivaut à cliquer sur le bouton next.

Enfin, après avoir utilisé le code suivant, la chronologie entière peut prendre en charge les événements de roue

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