Über das jQuery-Plugin Timelinr zur Implementierung von Timeline-Effekten

In diesem Artikel wird hauptsächlich das jQuery-Plug-in Timelinr vorgestellt, das einen gewissen Referenzwert hat. Jetzt können Freunde in Not darauf verweisen.

Die Zeitleiste ist chronologisch Reihenfolge. Ein oder mehrere Ereignisse werden zu einem relativ vollständigen Aufzeichnungssystem zusammengefügt, das dann den Benutzern in Form von Bildern und Texten präsentiert und mit allen geteilt wird >

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 Körper eine p#timeline als Anzeigebereich, #dates als Timeline, im Beispiel verwenden wir das Jahr als Hauptachse und #issues als Inhalt Der Anzeigebereich zeigt den Inhalt an, der dem Jahr des Hauptachsenpunkts entspricht. Achten Sie auf die entsprechende ID.

<p 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 --> 
</p>

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 CSS für das Layout verwenden. Sie können verschiedene CSS festlegen, um zu steuern, ob die Zeitleiste angezeigt wird Horizontal oder vertikal anordnen, Sie können es je nach Bedarf frei verwenden. Das Folgende ist eine vertikale Anordnung, dh der Stil, der für vertikales Scrollen verwendet wird.

#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

Der Aufruf des Timeline-Plugins 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:

Unterstützt Radtreiber

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

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

<script src="jquery.mousewheel.js"></script>

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

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

Wir haben die Schaltflächen „prevButton“ und „nextButton“ blockiert. Wenn das Radereignis auf Unterstützung eingestellt ist, entspricht das Aufwärtsfahren des Rads dem Klicken auf den „prevButton“ und das Abwärtsdrehen des Rads dem Klicken auf „nextButton“.

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

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

Das Obige ist der gesamte Inhalt dieses Artikels Ich hoffe, es wird für alle hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Über die Analyse der Verwendung der jQuery UI Datepicker-Zeitsteuerung

Über das jQuery-Plug-in Validieren, um Anpassungscode für den Verifizierungsergebnisstil zu implementieren

Parsen der jQuery-Datei-Upload-Steuerung Hochladen

Das obige ist der detaillierte Inhalt vonÜber das jQuery-Plugin Timelinr zur Implementierung von Timeline-Effekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!