suchen

Heim >Web-Frontend >js-Tutorial >jQuery-Barcode für verschiebbare Navigation im blauen Stil Sharing_jquery

jQuery-Barcode für verschiebbare Navigation im blauen Stil Sharing_jquery

WBOY
WBOYOriginal
2016-05-16 15:44:161692Durchsuche

Dies ist ein Spezialeffekt-Quellcode für die verschiebbare Navigationsleiste im jQuery-Blue-Stil, der es dem Schieberegler ermöglicht, der Maus zu folgen, um nach links und rechts zu gleiten. Es ist eine super coole Navigation Bar-Schiebecode.
Anwendung:
1. Führen Sie nacheinander nicenav.css, die jQuery-Skriptbibliothek und die Datei jquery.nicenav.js ein 2. Kopieren Sie den Code auf die Seite.
3. Sie können die Gleitgeschwindigkeit des Schiebereglers in den $.nicenav()-Klammern im Code festlegen.

Quellcode-DownloadAdresse

Der für Sie freigegebene jQuery-Barcode für die verschiebbare Navigation im blauen Stil lautet wie folgt

<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>
Operationsrendering:


Das Obige ist der verschiebbare Navigations-Barcode im jQuery-Stil, der mit Ihnen geteilt wurde. Ich hoffe, er gefällt Ihnen.


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js-Nachahmung Matrix-Letter-Drop-Effekt-Code-SharingNächster Artikel：js-Nachahmung Matrix-Letter-Drop-Effekt-Code-Sharing

In Verbindung stehende Artikel

Mehr sehen