recherche

Maison >interface Web >js tutoriel >code à barres de navigation coulissant de style bleu jQuery Sharing_jquery

code à barres de navigation coulissant de style bleu jQuery Sharing_jquery

WBOY
WBOYoriginal
2016-05-16 15:44:161677parcourir

Il s'agit d'un code source d'effet spécial pour la barre de navigation coulissante basé sur le style bleu jQuery, qui permet au curseur de suivre la souris pour glisser vers la gauche et la droite. C'est très dynamique par rapport à la navigation ordinaire. code à barres coulissant.
Comment utiliser :
1. Présentez nicenav.css, la bibliothèque de scripts jQuery et le fichier jquery.nicenav.js dans l'ordre
2. Copiez le code sur la page.
3. Vous pouvez définir la vitesse de glissement du curseur entre les parenthèses $.nicenav() dans le code.

Téléchargement du code sourceAdresse

Le code à barres de navigation coulissante de style bleu jQuery partagé avec vous est le suivant

<head>
 
 <style type="text/css">
 #bg { background-color: rgb(102, 132, 228); padding: 20px; }
 </style>
 <title>jQuery蓝色风格滑动导航栏</title>
 <link href="css/nicenav.css" rel="stylesheet" />
 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
 <script src="js/jquery.nicenav.js" type="text/javascript"></script>
</head>
<body>
 <div id="bg">
 <!-- 代码 开始 -->
 <div id="container">
 <ul id="nav">
 <li><a href="http://www.jb51.net" target="_blank">脚本之家<span>jb51</span></a></li>
 <li><a href="http://www.jb51.net/web/" target="_blank">网页制作<span>made</span></a></li>
 <li><a href="http://www.jb51.net/jiaoben/" target="_blank">脚本下载<span>download</span></a></li>
 <li><a href="http://www.jb51.net/list/index_1.htm" target="_blank">网络编程<span>programme</span></a></li>
 <li><a href="http://www.jb51.net/list/index_104.htm" target="_blank">数据库<span>database</span></a></li>
 <li><a href="http://www.jb51.net/books/" target="_blank">电子书籍<span>e-books</span></a></li>
 <li><a href="http://www.jb51.net/media/" target="_blank">媒体动画<span>flash</span></a></li>
 </ul>
 <div id="buoy"></div>
 </div>
 <script type="text/javascript">
 $.nicenav(300);
 </script>
 <!-- 代码 结束 -->
 </div>
 
</body>
</html>

Opération de rendu :

Ce qui précède est le code à barres de navigation coulissante de style bleu jQuery partagé avec vous. J'espère qu'il vous plaira.

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
Article précédent：js imitation Matrix lettre effet de chute partage de codeArticle suivant：js imitation Matrix lettre effet de chute partage de code

Articles Liés

Voir plus