code à barres de navigation coulissant de style bleu jQuery Sharing

code à barres de navigation coulissant de style bleu jQuery Sharing_jquery

WBOY

Libérer： 2016-05-16 15:44:16

original

1614 Les gens l'ont consulté

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>

Copier après la connexion

Opération de rendu :