jQuery 블루 스타일 슬라이딩 탐색 바코드 Sharing

jQuery 블루 스타일 슬라이딩 탐색 바코드 Sharing_jquery

WBOY

풀어 주다： 2016-05-16 15:44:16

원래의

1692명이 탐색했습니다.

이것은 jQuery 블루 스타일을 기반으로 한 슬라이딩 네비게이션 바의 특수 효과 소스 코드로, 슬라이더가 마우스를 따라 왼쪽 및 오른쪽으로 슬라이드할 수 있습니다. 일반 네비게이션에 비해 매우 역동적입니다. 바 슬라이딩 코드.
사용방법:
1. nicenav.css, jQuery 스크립트 라이브러리, jquery.nicenav.js 파일을 차례로 소개합니다.
2. 코드를 페이지에 복사하세요.
3. 코드의 $.nicenav() 괄호에서 슬라이더의 슬라이딩 속도를 설정할 수 있습니다.

소스코드 다운로드주소

공유해주신 jQuery 블루 스타일 슬라이딩 네비게이션 바코드는 다음과 같습니다

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

로그인 후 복사

작업 렌더링:

위 내용은 여러분께 공유해 드린 jQuery 블루 스타일 슬라이딩 네비게이션 바코드입니다.