swiper.js仿今日头条app触屏滑动导航特效代码下载


swiper.js仿今日头条app触屏滑动导航特效代码下载
swiper.js仿今日头条app触屏滑动导航特效代码下载以及触屏滑动导航等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/swiper.min.css">

2. 引入JS

<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/swiper.min.js"></script>

3. HTML代码

<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 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>
<img src="images/img02.png">
<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>

相关推荐

发表评论

相关文章