swiper.js仿今日头条app手机端顶部触屏滑动导航代码,基于jQuery实现的顶部点击可居中导航条特效。
js代码
<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')
})
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791