HTML5菜单栏切换实现底部滑块滑动效果实现

               

1、使用html+css+js实现导航切换动画效果

css代码

.news-title{position: relative;border-bottom: 0.2rem solid #e5e8f0;} .news-module>li{float: left;width: 20%;text-align: center;font-size: 1.3rem;line-height:3.5rem;color: #000;background-color: #FFFFFF;}.news-slider{background-color: #38AD67;height: 0.35rem;width:2.5rem;transition: 0.5s;position: absolute;bottom: -0.2rem;left: 0.5rem;border-radius: 0.3rem;}.news-module .active{color: #259251;font-size: 1.35rem;}

html代码

<div class="news-title"> <ul class="news-module clear">  <li class="active">头条</li>  <li>行情</li>  <li>政策</li>  <li>兽药</li>  <li>饲料</li> </ul> <div class="news-slider"></div></div>

js代码

var th_width = $(".news-module li").eq(0).width();var th_left = $(".news-module li").eq(0).offset().left;var slider_width = $(".news-slider").width();var slider_left = th_left + (th_width/2) - slider_width/2;$(".news-slider").css("left",slider_left);$(".news-module li").on("click",function(){var n = $(this).index(); var th_width = $(this).width(); var th_left = $(this).offset().left; var slider_width = $(".news-slider").width(); var slider_left = th_left + (th_width/2) - slider_width/2; $(".news-slider").css("left",slider_left); $(this).addClass("active").siblings().removeClass("active");});