仿今日头条app手机端顶部触屏滑动导航
Posted weiwei0111
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿今日头条app手机端顶部触屏滑动导航相关的知识，希望对你有一定的参考价值。
swiper.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="swiper.min.css"> <style type="text/css"> * { margin: 0; padding: 0; } #topNav { width: 100%; overflow: hidden; font: 16px/32px hiragino sans gb, microsoft yahei, simsun; border-bottom:1px solid #f8f8f8; } #topNav .swiper-slide { padding: 0 5px; letter-spacing:2px; width:3rem; text-align:center; } #topNav .swiper-slide span{ transition:all .3s ease; display:block; } #topNav .active span{ transform:scale(1.1); color:#FF2D2D; } img{ width:100%; line-height:0; } </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 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> </body> </html> <script src="jquery-3.2.1.min.js"></script> <script src="swiper-3.4.0.min.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) { 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>
以上是关于仿今日头条app手机端顶部触屏滑动导航的主要内容，如果未能解决你的问题，请参考以下文章