html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <meta name="discription" content="诚筑说超级 CG 培训中心" />
<meta name="keywords" content=CG, 培训 />
- <link rel="stylesheet" href="CSS/reset.css" />
- <style>
- nav { width: 600px; margin: 0 auto; } .nav-list { width: 100%; list-style-type:
- none; } .nav-list li { display: inline-block; margin: 5px; width: 90px;
- float: left; } .nav-list li a { display: block; text-decoration:none; text-align:
- center; font-size: 16px; color: #0DAF90; } .slidenav { margin-top: 10px;
- /* 此处的 margin-left 只在 qdfuns 上被使用, 本地取消即可 */ margin-left:36px; width: 100%; height:
- 3px; float: left; box-sizing: border-box; box-shadow:0 0 5px #ccc; } .slide-span
- { border-bottom: 3px solid #0daf90; box-shadow: 2px 2px 10px #0DAF90; float:
- left; width: 100px; }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="wrapper">
- <nav>
- <ul class="nav-list" id="nav-list">
- <li class="nav-current">
- <a href="http://www.chengzhushuo.com">
- <span class="nav-span">
诚筑说
- </span>
- </a>
- </li>
- <li>
- <a href="http://www.chengzhushuo.com">
- <span class="nav-span">
是什么
- </span>
- </a>
- </li>
- <li>
- <a href="http://www.chengzhushuo.com">
- <span class="nav-span">
不知道?
- </span>
- </a>
- </li>
- <li>
- <a href="http://www.chengzhushuo.com">
- <span class="nav-span">
快搜搜!
- </span>
- </a>
- </li>
- <li>
- <a href="http://www.chengzhushuo.com">
- <span class="nav-span">
原来_
- </span>
- </a>
- </li>
- <li>
- <a href="http://www.chengzhushuo.com">
- <span class="nav-span">
这么棒!
- </span>
- </a>
- </li>
- </ul>
- <div class="slidenav">
- <span class="slide-span">
- </span>
- </div>
- </nav>
- </div>
- </br>
- </br>
- </br>
- (摘自诚筑说免费视频教程案例)
- </div>
- </body>
- <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js">
- </script>
- <script>
- $(function() {
- var slideW = $(".nav-current").index() * 100;
- $(".slide-span").css({
- "margin-left": slideW
- },
- 700);
- $("nav ul li a").hover(function() {
- var slideStart = $(this).parents().index();
- var slideW = (slideStart) * 100;
- $(".slide-span").stop().animate({
- "margin-left": slideW
- },
- 700);
- },
- function() {
- var slideW = $(".nav-current").index() * 100;
- $(".slide-span").stop().animate({
- "margin-left": slideW
- },
- 700);
- })
- })
- </script>
- </html>
来源: http://www.qdfuns.com/article/36119/b869641126a95e8f8aed59a7572063bc.html