jQuery 블루 스타일 슬라이딩 탐색 바코드 Sharing_jquery
- WBOY원래의
- 2016-05-16 15:44:161691검색
이것은 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 블루 스타일 슬라이딩 네비게이션 바코드입니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.