swiper.js仿今日头条app手机端顶部触屏滑动导航代码

来源:https://www.sucaihuo.com/js/2249.html 2017-06-29 21:45浏览(8207) 收藏

swiper.js仿今日头条app手机端顶部触屏滑动导航代码,基于jQuery实现的顶部点击可居中导航条特效。
swiper.js仿今日头条app手机端顶部触屏滑动导航代码
分类:手机特效 > 触屏滑动 难易:初级
查看演示 下载资源 下载积分: 20 积分

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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2