Maison  >  Article  >  interface Web  >  Guide d'utilisation du plug-in de barre de défilement jQuery nanoscroller_jquery

Guide d'utilisation du plug-in de barre de défilement jQuery nanoscroller_jquery

WBOY
WBOYoriginal
2016-05-16 16:02:561503parcourir

Lorsque le site Web affiche des informations, si la quantité d'informations est trop importante, il existe trois solutions principales. 1. Pagination, affichage des informations dans les pages. 2. La page entière s'affiche, mais la page est trop longue, ce qui affecte l'expérience de navigation. 3. Utilisez des barres de défilement, mais le style de barre de défilement par défaut est trop simple et l'expérience utilisateur n'est pas conviviale. Nous devons donc embellir la barre de défilement.

Le moyen le plus simple d'embellir la barre de défilement est d'utiliser le plug-in jquery. Cet article présente le plug-in de barre de défilement nanoscroller dans le plug-in jquery.

Affichage officiel, le style peut être personnalisé

1. Fonction du plug-in nanoscroller

Implémenter la fonction de défilement du contenu

2.adresse officielle de nanoscroller

http://jamesflorentino.github.io/nanoScrollerJS/

3. Comment utiliser le nanoscroller

1. Fichiers de référence

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.nanoscroller.js"></script>
<link rel="stylesheet" href="nanoscroller.css">

2. Définir le style de la barre de défilement

.nano { background: #bba; width: 500px; height: 500px; font-size:12px;font-family:微软雅黑;border-radius:8px; }
.nano .content { 
  padding: 20px;
}
.nano .pane {
  background: #555;
  width: 8px;
  right: 1px;
 margin: 5px;
}
.nano .slider {
  background: #111;
}

3. Faites défiler le contenu affiché

<div id="about" class="nano">
 <div class="content"> 
   滚动显示的内容
  </div>
</div>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn