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

最新推荐文章于 2024-02-02 18:57:04 发布

可乐6666

最新推荐文章于 2024-02-02 18:57:04 发布

阅读量1w

点赞数 4

分类专栏： JavaScript 文章标签： html5 css html

本文链接：https://blog.csdn.net/xuexizhe88/article/details/54576010

版权

JavaScript 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

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