Das jQuery-Plug-in Timelinr implementiert timeline effects_jquery

Vorwort

Dies ist ein Timeline-Plugin, das zur Darstellung von Verlauf und Plänen verwendet werden kann. Es eignet sich besonders für einige Websites, um Entwicklungsprozesse, Großereignisse usw. anzuzeigen. Dieses Plug-in basiert auf jQuery und kann Folienwechsel, horizontales und vertikales Scrollen durchführen und unterstützt Pfeiltasten auf der Tastatur. Nach der Erweiterung können Mausradereignisse unterstützt werden.

HTML

Wir erstellen im Hauptteil eine div #timeline als Anzeigebereich, #dates ist die Zeitleiste, in unserem Beispiel verwenden wir das Jahr als Hauptachse, #issues als Inhaltsanzeigebereich, also den entsprechenden Inhalt anzeigen Achten Sie beim Jahr des Hauptachsenpunktes auf die entsprechende ID.

<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 hängt von jQuery ab, daher müssen die jQuery-Bibliothek und das jQuery Timelinr-Plug-in zuerst in HTML geladen werden.

<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

Als nächstes können Sie mithilfe von CSS festlegen, ob die Zeitleiste horizontal oder vertikal angeordnet ist. Das Folgende ist eine vertikale Anordnung, d. h. ein vertikaler Stil Scrollen.

#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

Das Aufrufen des Timeline-Plug-Ins ist sehr einfach. Führen Sie den folgenden Code aus:

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

jQuery Timelinr bietet viele konfigurierbare Optionen, die je nach Bedarf eingestellt werden können. Wie im Bild gezeigt:

Stützrollenantrieb

Außerdem unterstützt das aktuelle jQuery Timelinr den Mausrad-Treiber nicht. Tatsächlich können wir das Plug-in leicht erweitern, um den Mausrad-Treiber zu unterstützen. Hier müssen wir das Wheel-Time-Plug-in verwenden. js

Nachdem Sie das Plug-in heruntergeladen haben, importieren Sie es auf der Seite:

Ändern Sie dann jquery.timelinr-0.9.53.js und fügen Sie etwa in Zeile 260 den folgenden Code hinzu:

//--------------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(); 
    } 
  }); 
} 

Wir haben im Beispiel die Schaltflächen „prevButton“ und „nextButton“ blockiert. Wenn das Radereignis auf „Unterstützung“ eingestellt ist, entspricht das Hochfahren des Rades dem Klicken auf den „prevButton“ und das Herunterfahren des Rades dem Klicken auf „nextButton“.

Nach Verwendung des folgenden Codes kann schließlich die gesamte Zeitleiste Radereignisse unterstützen

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