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. Linux-Slabinfo

    1.内存管理有两个算法:伙伴算法(buddy system)和slab算法.伙伴算法是以页为单位管理内存,slab算法是以字节为单位管理内存,是内核的小内存管理算法.特点是基于对象进行管理. slab ...

  2. [转] spring framework体系结构及内部各模块jar之间的maven依赖关系

    很多人都在用spring开发java项目,但是配置maven依赖的时候并不能明确要配置哪些spring的jar,经常是胡乱添加一堆,编译或运行报错就继续配置jar依赖,导致spring依赖混乱,甚至下 ...

  3. jQuery的1.x版本的$(element).css()设置元素字体颜色时出现的问题（在IE8以下）

    最近赶项目,自己写了个基于jQuery的弹出层插件,中间遇到一个问题,怎么也找不到解决方法,最后发现就是空格的问题...欲哭无泪啊... 在给函数传参时,因为写css代码时习惯在:后面加个空格在写样式 ...

  4. leetcode1：两数之和

    给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 实例: 给定 nums = [2, 7, 11, 15],target = ...

  5. 参加公司工作总结会要准备的内容 IT 技术部

    季度总结PPT内容: 1.工作总概述:在总结期内完成的具有代表性的工作内容(最好是直观的实现界面或功能演示截图,而不是苍白的文字描述): 2.问题总结:操作有难度或者难以把握的问题,在和相关人员沟通后 ...

  6. ClassLoader的工作机制

    本文中主要介绍类加载器的工作机制 一:首先什么是类加载器? 类加载器就是用来加载java类到java虚拟机中.java源程序经过编译之后形成字节码文件,类加载器将字节码文件加载到内存中,并转换成jav ...

  7. Java中String字符串常量池

    首先看一个例子,通过这个例子更能快速理解String常量池 public static void main(String[] args) { String a = "ab"; St ...

  8. linux简单安装方法

    一.配置静态IP NAT:模式: 修改网卡eth0 vim /etc/sysconfig/network-scripts/ifcfg-eth0 内容如下: DEVICE=eth0 HWADDR=:0C ...

  9. javaMail的使用以及trying to connect to host "1xxx@163.com", port 25, isSSL false异常

    最近项目用到邮件系统,开始了解javaMail...话不多说先上代码: pom依赖: <!--    邮件  https://mvnrepository.com/artifact/javax.m ...

  10. 信息在DNN马尔科夫链结构上的变化

    一个经典的全连接神经网络,如下图所示,输入层可以看做T0,输出层可以看做$\hat{\mathrm{Y}}$=TL+1. 考虑每一层隐藏层T与X.Y的交互信息:I(X; Ti), I(Ti, Y),交 ...