html5底部导航栏修改,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;
网站底部代码js特效
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");
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。