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代码

	

		
头条
		
行情
		
政策
		
兽药
		
饲料
	
	

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");
});