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><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'
});
});
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.jsNachdem Sie das Plug-in heruntergeladen haben, importieren Sie es es auf der Seite:<script src="jquery.mousewheel.js"></script>
//--------------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'
});
});Ü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!
