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. xmal中的渐变

    <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStop Offset=" ...

  2. Taro button点击切换选中状态

    1.引入组件 2.state中设置选中状态 // button按钮的默认选中,0代表选中 state = { currentIndex: 0 } 3.设置class的样式,点击更改选中 selectN ...

  3. tiny4412 --Uboot移植(4) 串口

    开发环境:win10 64位 + VMware12 + Ubuntu14.04 32位 工具链:linaro提供的gcc-linaro-6.1.1-2016.08-x86_64_arm-linux-g ...

  4. java 得到项目路径

    JavaEXTTomcatJSPWeb 一 相对路径的获得  说明:相对路径(即不写明时候到底相对谁)均可通过以下方式获得(不论是一般的java项目还是web项目)  String relativel ...

  5. php实现下载模板与上传模板解析

    <? //下载模板的请求 if(isset($_GET['action']) && $_GET['action'] =='down_group_excel'){ $code = ...

  6. 刷机魅蓝note2

    直接上了. 情况: 魅蓝note2 公共版  忘记flyme 密码,手机号也换了,,找不回了..只能刷了.网上说就算刷了也不行,还是要输入flyme 密码 1. 直接刷官方的zip 包,不行,仍然要输 ...

  7. list对象中根据两个参数过滤数据

    list对象中根据两个参数过滤数据 List<demo> list = new List<demo>() { ,b=,c=,d= }, ,b=,c=,d= }, ,b=,c=, ...

  8. RQNOJ PID51 / 乒乓球 ☆

    因为是多行输入,所以用了getchar()进行输入,题目没有说明数据范围,所以开始的时候因为数组开的不够大,WA90了一次,我之前开了10000的长度,之后开100000的长度跑过了 一个基本的模拟, ...

  9. new Image().src资源重复请求问题

    const img = new Image(); img.setAttribute("crossOrigin", 'Anonymous'); img.src = url + '?t ...

  10. 你了解栈溢出StackOverFloweExeption的原理吗？

    StackOverflowException的常见几种引起的方式 1.类的相互引用 2.方法的循环调用 3.属性Set方法的死循环调用 class Program : IProgram { IPers ...