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

  1. 手机端Swiper 触屏滑动

    在线实例 默认 响应式 垂直 空间间隔 滚动 自动滚动 中心化 中心化自动 免费模式 多个滚动 水平滚动 grab-cursor 使用方法 <div class="swiper-con ...

  2. android仿今日头条App、多种漂亮加载效果、选择器汇总、记事本App、Kotlin开发等源码

    Android精选源码 android漂亮的加载效果 android各种 选择器 汇总源码 Android仿bilibili搜索框效果 Android记事本app.分类,涂鸦.添加图片或者其他附件 仿 ...

  3. 手机端html5触屏事件(touch事件)

    touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...

  4. (转)手机端html5触屏事件(touch事件)

    本文转载自:http://blog.sina.com.cn/s/blog_51048da70101f0ex.html touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时 ...

  5. 转：手机端html5触屏事件(touch事件)

    touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...

  6. 自适应 Tab 宽度可以滑动文字逐渐变色的 TabLayout(仿今日头条顶部导航)

    TabLayout相信大家都用过,2015年Google大会上发布了新的Android Support Design库里面包含了很多新的控件,其中就包含TabLayout,它可以配合ViewPager ...

  7. vue2.0仿今日头条开源项目

    vue-toutiao 这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版. 前言 本人是 今日头条 的重度用户,在学习vue.js过程中,在GitHub ...

  8. [Android] Android 手机下 仿 今日头条 新闻客户端

    利用一个月的时间,自学了 Android 开发 ,为了检验学习成果,特意 开发了这个  仿 今日头条 新闻客户端 AppNews 包括图文新闻+视频新闻+图片新闻 预览演示如下: 功能说明: 1)底部 ...

  9. jq+swiper 实现今日头条App的选项卡效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. Spring Cloud+Dubbo对Feign进行RPC改造

    因为Spring Cloud Feign是基于Http Restful的调用,在高并发下的性能不够理想(虽然他是基于Ribbon以及带有熔断机制,可以防止雪崩),成为性能瓶颈,所以我们今天对Feign ...

  2. c# 判断当前版本是Debugger或Release

    1.第一种 (常用) #if DEBUG //debugger 环境 #else //release 环境 #endif 2. 第二种 private bool IsDebug() { Assembl ...

  3. MSSQL死锁进程查看及关闭

    select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName from sys.dm_tran ...

  4. Ansible安装及OS规划

    Ansible安装  1.以管理用户mtnsadmin连接服务器后下载安装包(-O表示将下载的文件存放到指定的文件夹下,同时重命名下载的文件)     sudo wget -O /etc/yum.re ...

  5. RNAseq测序reads定位

    RNAseq测序reads定位 发表评论 3,210 A+ 所属分类:Transcriptomics   收  藏 获得RNA-seq的原始数据后,首先需要将所有测序读段通过序列映射(mapping) ...

  6. Linux 查看网络状态工具

    1. iftop 效果如下图: 界面上面显示的是类似刻度尺的刻度范围,为显示流量图形的长条作标尺用的. 中间的<= =>这两个左右箭头,表示的是流量的方向. TX:发送流量RX:接收流量T ...

  7. Finance API文档

    0. 公共部分 请求url {apiRoot}/{method}?ver={version}&appkey={appkey}&sign={sign} 参数名 说明 示例 apiRoot ...

  8. 51Nod - 1046 （附关于快速幂的讨论）

    题意: 给出3个正整数A B C,求A^B Mod C. 例如,3 5 8,3^5 Mod 8 = 3. 分析: 快速幂模板题. 快速幂: 1.自然数的拆分 对于任何的自然数, 可以把它用形如1001 ...

  9. 利用insertd查出更新记录

    DROP TABLE #tableCREATE TABLE #table(CompanyID VARCHAR(20),BillNo VARCHAR(40))UPDATE dbo.SD_Inv_Move ...

  10. 从React组件划分的纠结到总结

    在实际开发项目中,我将所有的React组件划分为容器组件和展示组件,展示组件其实就是一个纯函数组件,没有任何副作用,基本都是PureComponent.但是突然,出现了这么一个问题: 我有一个浮层组件 ...