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. Axis通过方法获取webService请求报文

    MessageContext messageContext = _call.getMessageContext(); Message reqMsg = messageContext.getReques ...

  2. 视频剪辑软件原型-videocut

    制作软件:墨刀 分享网址:<iframe src="https://modao.cc/app/fb0e31590711295ebebdf50fff7dd9861b7a9c1d/embe ...

  3. 探索未知种族之osg类生物---渲染遍历之认识SceneView

    前言 我们在进行osg程序的开发时,最常用到的场景管理方式是“场景节点树”的结构,     a 场景树底端的叶节点(osg::Geode)包含了各种需要渲染的几何体的顶点和渲染状态信息:     b  ...

  4. Python基础与进阶

    1 Python基础与进阶 欢迎来到Python世界 搭建编程环境 变量 | 字符串 | 注释 | 错误消除 他只用一张图,就把Python中的列表拿下了! 使用 If 语句进行条件测试 使用字典更准 ...

  5. matplotlib -- 基础知识

    matplotlib 组织图表的方式 最上层是一个 Figure 实例,包含了所有可见的和其他一些不可见的内容.该 Figure 实例包含了一个 Axes 实例的成员属性 Figure.axes,同时 ...

  6. 腾讯开源的Paxos库PhxPaxos代码解读---Prepare阶段(一)

    简单的画了一下PhxPaxos在Prepare阶段的逻辑,主要是正常的逻辑,异常逻辑和超时后面再写了; 熟悉PhxPaxos代码最好的方法是编译运行sample目录下的三个例子,编译方法在另一篇博客已 ...

  7. 博客六--Tensorflow卷积神经网络的自主搭建

    本人较懒也很忙,所以就不重复工作.连接我的开源中国博客查询:https://my.oschina.net/u/3770644/blog/3042523

  8. Jquery 数组操作大全【转载】

    转载于:https://www.jb51.net/article/43164.htm 1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 ...

  9. 使用Python完成排序（快排法、归并法）

    class Sort(object): def quick_sort(self, ls): self.quick_sort_helper(ls, 0, len(ls) - 1) return ls d ...

  10. sublime text2 安装及使用教程

    1.下载安装包地址:https://www.sublimetext.com/2 2.安装,一直点下一步就好,将下列选项打钩,这样文件右键就可以直接用sublime text2打开 3.新建一个html ...