jq+swiper 实现今日头条App的选项卡效果
程序员文章站
2022-05-26 14:50:24
今日头条APP顶部点击可居中导航 首页 热点 汽车 视频 社会 娱发 科技 生活 敲门 ... ......
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>今日头条app顶部点击可居中导航</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://cdn.bootcss.com/swiper/4.0.6/css/swiper.min.css">
<style>
* {
margin: 0;
padding: 0;
}
#topnav {
width: 100%;
overflow: hidden;
font: 18px;
}
#topnav .swiper-slide {
padding: 0 10px;
width: auto;
text-align: center;
}
#topnav .swiper-slide span {
transition: all .3s ease;
display: block;
}
#topnav .active span {
color: #ff2d2d;
border-bottom: 3px solid #ff2d2d;
}
.tab-list {
display: none;
}
</style>
</head>
<body>
<div id="topnav" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide active"><span>首页</span></div>
<div class="swiper-slide"><span>热点</span></div>
<div class="swiper-slide"><span>汽车</span></div>
<div class="swiper-slide"><span>视频</span></div>
<div class="swiper-slide"><span>社会</span></div>
<div class="swiper-slide"><span>娱发</span></div>
<div class="swiper-slide"><span>科技</span></div>
<div class="swiper-slide"><span>生活</span></div>
<div class="swiper-slide"><span>敲门</span></div>
<div class="swiper-slide"><span>理科</span></div>
</div>
</div>
<div class="tab-list-box">
<div class="tab-list" style="display:block;">内容1</div>
<div class="tab-list">内容2</div>
<div class="tab-list">内容3</div>
<div class="tab-list">内容4</div>
<div class="tab-list">内容5</div>
<div class="tab-list">内容6</div>
<div class="tab-list">内容7</div>
<div class="tab-list">内容8</div>
<div class="tab-list">内容9</div>
<div class="tab-list">内容10</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swiper/3.4.2/js/swiper.js"></script>
<script type="text/javascript">
var myswiper = new swiper('#topnav', {
freemode: true,
freemodemomentumratio: 0.5,
slidesperview: 'auto',
});
swiperwidth = myswiper.container[0].clientwidth
maxtranslate = myswiper.maxtranslate();
maxwidth = -maxtranslate + swiperwidth / 2
$(".swiper-container").on('touchstart', function (e) {
e.preventdefault()
})
myswiper.on('tap', function (swiper, e) {
// e.preventdefault()
slide = swiper.slides[swiper.clickedindex]
slideleft = slide.offsetleft
slidewidth = slide.clientwidth
slidecenter = slideleft + slidewidth / 2
// 被点击slide的中心点
myswiper.setwrappertransition(300)
if (slidecenter < swiperwidth / 2) {
myswiper.setwrappertranslate(0)
} else if (slidecenter > maxwidth) {
myswiper.setwrappertranslate(maxtranslate)
} else {
nowtlanslate = slidecenter - swiperwidth / 2
myswiper.setwrappertranslate(-nowtlanslate)
}
$("#topnav .active").removeclass('active');
$("#topnav .swiper-slide").eq(swiper.clickedindex).addclass('active');
$(".tab-list").eq(swiper.clickedindex).fadein().siblings('.tab-list').hide();
});
</script>
</body>
</html>
上一篇： GVision，新的互联网技术