html实现导航滑动效果,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");

});