仿今日头条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手机端顶部触屏滑动导航的更多相关文章

手机端Swiper 触屏滑动
在线实例默认响应式垂直空间间隔滚动自动滚动中心化中心化自动免费模式多个滚动水平滚动 grab-cursor 使用方法 <div class="swiper-con ...
android仿今日头条App、多种漂亮加载效果、选择器汇总、记事本App、Kotlin开发等源码
Android精选源码 android漂亮的加载效果 android各种选择器汇总源码 Android仿bilibili搜索框效果 Android记事本app.分类,涂鸦.添加图片或者其他附件仿 ...
手机端html5触屏事件(touch事件)
touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...
(转)手机端html5触屏事件(touch事件)
本文转载自:http://blog.sina.com.cn/s/blog_51048da70101f0ex.html touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时 ...
转：手机端html5触屏事件(touch事件)
touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...
自适应 Tab 宽度可以滑动文字逐渐变色的 TabLayout(仿今日头条顶部导航)
TabLayout相信大家都用过,2015年Google大会上发布了新的Android Support Design库里面包含了很多新的控件,其中就包含TabLayout,它可以配合ViewPager ...
vue2.0仿今日头条开源项目
vue-toutiao 这是用 vue.js 2.0 高仿今日头条的移动端项目,结合了原生app的部分功能以及网页版. 前言本人是今日头条的重度用户,在学习vue.js过程中,在GitHub ...
[Android] Android 手机下仿今日头条新闻客户端
利用一个月的时间,自学了 Android 开发 ,为了检验学习成果,特意开发了这个仿今日头条新闻客户端 AppNews 包括图文新闻+视频新闻+图片新闻预览演示如下: 功能说明: 1)底部 ...
jq+swiper 实现今日头条App的选项卡效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

解析ReentrantLock实现原理
在Java中通常实现锁有两种方式,一种是synchronized关键字,另一种是Lock(Lock的实现主要有ReentrantLock.ReadLock和WriteLock).synchronize ...
swift 关于FDFullscreenPopGesture的右滑返回
关于导航栏右滑返回的工具库 FDFullscreenPopGesture 是 OC 版本,用了 runtime 等各种骚操作关于 swift ,我在 UINavigationController 的 ...
2018-2019-2 20175234 实验二《Java面向对象程序设计》实验报告
目录实验内容实验要求实验步骤实验收获参考资料实验内容初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态初步掌握UML建模熟悉S.O.L.I.D原则解设计模式实验 ...
安卓学习 intent
其实学习了好几个星期了,是看老罗的视频,但进度太慢今天换了一本书 Intent 切换页面啊啊啊啊 CompentName comp=new CompentName(MainActivity.th ...
RestTemplate 中文乱码解决
@Bean public RestTemplate restTemplate() { RestTemplate restTemplate = new RestTemplate(); restTempl ...
si_da
1. apt-get 从互联网的软件仓库中搜索.安装.升级.卸载软件或操作系统一般需要root权限执行,所以一般跟着sudo命令 sudo ifstat apt-get install -y ifs ...
从集合中查找最值得方法——max(),min(),nlargest(),nsmallest()
从集合中查找最值得方法有很多,常用的方法有max(),min(),nlargest(),nsmallest()等. 一.max()和min() 1.1 入门用法直接使用max(),min(),返回可 ...
VB 读取列表文件名
Private Sub Command1_Click()Dim d As String, s As String If Dir(App.Path & "\down", vb ...
iOS 关于重定向的那些事(NSURLProcotol-WKWebView)
重定向定义:重定向(Redirect)就是通过各种方法将各种网络请求重新定个方向转到其它位置(如:网页重定向.域名的重定向.路由选择的变化也是对数据报文经由路径的一种重定向). NSURLProt ...
《数学之美》--第一章：文字和语言 vs 数字和信息
PDF下载第一章文字和语言 vs 数字和信息数字.文字和自然语言一样,都是信息的载体,它们之间原本有着天然的联系.语言和数学的产生都是为了同一个目的-记录和传播信息.但是,直到半个多世纪前香农博 ...

仿今日头条app手机端顶部触屏滑动导航

仿今日头条app手机端顶部触屏滑动导航的更多相关文章

随机推荐

热门专题