Cet article présente principalement le plug-in jQuery Timelinr pour obtenir des effets de chronologie. Il a maintenant une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer
La chronologie est basée sur la chronologie. ordre. Un ou plusieurs événements sont connectés en série pour former un système d'enregistrement relativement complet, qui est ensuite présenté aux utilisateurs sous forme d'images et de textes. Cet article en a rassemblé un relativement bon sur Internet et l'a partagé avec tout le monde
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 glisser pour basculer, 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 p#timeline dans le corps comme zone d'affichage, #dates comme chronologie, dans l'exemple nous utilisons l'année comme axe principal, et #issues as the content La zone d'affichage affiche le contenu correspondant à l'année du point de l'axe principal. Faites attention à l'ID correspondant.<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
Ensuite, utilisez CSS pour la mise en page, vous pouvez définir différents CSS pour contrôler l'heure. les axes sont disposés horizontalement ou verticalement selon vos besoins. Voici la disposition verticale, c'est-à-dire le style utilisé pour le défilement vertical.#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
L'appel du plugin timeline est très simple, exécutez le code suivant :
$(function(){ $().timelinr({ orientation:'vertical' }); });
Prend en charge le pilote de roue
De plus, jQuery Timelinr actuel ne prend pas en charge le pilote de roue de la souris. En fait, vous pouvez légèrement étendre le plug-in pour prendre en charge le pilote de la molette de la souris. Ici, vous devez utiliser le plug-in wheel time : jquery.mousewheel.jsAprès avoir téléchargé le plug-in, importez. sur la page :<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(); } }); }
$(function(){ $().timelinr({ mousewheel: 'true' }); });
À propos de l'analyse de l'utilisation du contrôle temporel jquery UI Datepicker
À propos du plug-in jQuery Valider pour implémenter le code de personnalisation pour le style de résultat de vérification
Analyse du contrôle de téléchargement de fichiers jQuery Uploadify
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!