使用jQuery怎么实现一个滑块滑动导航效果

tangjin

作者

这期内容当中小编将会给大家带来有关使用jQuery怎么实现一个滑块滑动导航效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

具体如下：

使用jQuery怎么实现一个滑块滑动导航效果

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>www.jb51.netjquery滑动导航</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;-moz-box-sizing:border-box;}
body{
font:16px/20px'Microsoftyahei,微软雅黑';
color:#AFBBBB;
}
ul{
list-style-type:none;
}
ulli{
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:0auto;
}
.navul{
background:gray;
height:35px;
line-height:35px;
position:relative;
padding:05px;
}
.navulli{
position:relative;
padding:025px;
}
.navulli>a{
position:relative;
z-index:100;/*将a元素的z-index设置比li大，这样hover效果才不会无效*/
}
.navulli:last-child{
width:98px;
height:90%;
position:absolute;
z-index:50;
left:5px;
bottom:0;
top:0;
margin:auto;
background:rgba(152,206,170,0.5);
border-radius:5px;
}
</style>
</head>
<body>
<divclass="nav">
<ulclass="clearfix">
<li><ahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">幼儿园</a></li>
<li><ahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">小学</a></li>
<li><ahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">初中</a></li>
<li><ahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">高中</a></li>
<li><ahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">大学</a></li>
<li><ahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">社会</a></li>
<liclass="huadong"id="huaBlock"></li>
</ul>
</div>
<scriptsrc="http://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
<script>
$(function(){
$("ulli:not(:last)").hover(function(){
$("#huaBlock").stop();//停止正在运行的动画
varcurliWidth=$(this).outerWidth(),curleft=$(this).offset().left-$(this).parent().offset().left;//当前li的偏移量减去当前ul的偏移量就是li距离ul的距离
//alert("curleft:"+curleft);
$("#huaBlock").animate({"width":curliWidth,"left":curleft},500);
},function(){
$("#huaBlock").stop();
$("#huaBlock").animate({"width":98,"left":5},200);
});
});
</script>
</body>
</html>

上述就是小编为大家分享的使用jQuery怎么实现一个滑块滑动导航效果了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注恰卡编程网行业资讯频道。

阅读全文

发布于 2021-04-08 13:38:03

jquery