做项目遇到了一个滑块导航的效果,就动手写了一下,分享给大家参考一下,具体代码如下:
先看下效果,具体滑动效果动手测试一下:
1.HTML 代码:
[HTML] 纯文本查看 复制代码 <div class="nav">
<ul class="clearfix">
<li><a href="javascript:void(0)">HTML</a></li>
<li><a href="javascript:void(0)">CSS</a></li>
<li><a href="javascript:void(0)">JS</a></li>
<li><a href="javascript:void(0)">JAVA</a></li>
<li><a href="javascript:void(0)">C#</a></li>
<li><a href="javascript:void(0)">PHP</a></li>
<li id="navSlide"></li>
</ul>
</div>
2.css样式:
[CSS] 纯文本查看 复制代码 *{margin: 0;padding: 0;box-sizing: border-box;-moz-box-sizing: border-box;}
body {
font: 16px/20px 'Microsoft yahei,微软雅黑';
color: #AFBBBB;
}
ul {
list-style-type: none;
}
ul li {
float: left;
}
a {
text-decoration: none;
color: #AFBBBB;
}
a:hover {
color: #ffffff;
cursor: pointer;
}
.clearfix:before,.clearfix:after {
content:"";
clear: both;
display: table;
height: 0;
zoom: 1;
overflow: hidden;
}
.nav {
width:519px;
margin: 50px auto;
}
.nav ul {
background: #0C83F0;
height: 35px;
line-height: 35px;
position: relative;
padding: 0 5px;
}
.nav ul li {
position: relative;
padding: 0 25px;
}
.nav ul li>a {
position: relative;
z-index: 100; /*将a元素的z-index设置比li大,这样hover效果才不会无效*/
color: #fff;
}
.nav ul li:last-child {
width: 98px;
height: 90%;
position: absolute;
z-index: 50;
left: 5px;
bottom: 0;
top: 0;
margin: auto;
background: #ddedfd;
border-radius: 5px;
}
3.js代码:
[JavaScript] 纯文本查看 复制代码 $(function(){
$("ul li:not(:last)").hover(function(){
$("#navSlide").stop(); //停止正在运行的动画
var curliWidth=$(this).outerWidth(),curleft=$(this).offset().left-$(this).parent().offset().left; //当前li的偏移量减去当前ul的偏移量就是li距离ul的距离
// alert("curleft:"+curleft);
$("#navSlide").animate({"width":curliWidth,"left":curleft},500);
},function(){
$("#navSlide").stop();
$("#navSlide").animate({"width":98,"left": 5},200);
});
});
以上就是滑动导航的全部代码了,如需源码,请点击》》
滑块导航.zip
(29.74 KB, 下载次数: 5)
|