仿今日头条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>

原文地址:https://www.cnblogs.com/weiwei0111/p/10792197.html

时间: 2024-10-05 14:24:50

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

手机端Swiper 触屏滑动

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

项目记录,仿今日头条app

项目记录,仿今日头条app,五六月份主要做的项目,第一版已经完成上架,二次开发正在进行中

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

touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控): touches:当前位于屏幕上的所有手指的列表. targetTouches:位于当前DOM元素上手指的列表. changedTouches:涉及当前事件手指的列表. 每个触摸点由包含了如下触摸信息(常用): identifier:一个数值,唯一标识触摸会话(touch ses

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

touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控): touches:当前位于屏幕上的所有手指的列表. targetTouches:位于当前DOM元素上手指的列表. changedTouches:涉及当前事件手指的列表. 每个触摸点由包含了如下触摸信息(常用): identifier:一个数值,唯一标识触摸会话(touch ses

手机端html5触屏事件(touch事件)【转】

touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控): touches:当前位于屏幕上的所有手指的列表. targetTouches:位于当前DOM元素上手指的列表. changedTouches:涉及当前事件手指的列表. 每个触摸点由包含了如下触摸信息(常用): identifier:一个数值,唯一标识触摸会话(touch ses

Android——今日头条APP——高仿——ZYFNewsCTZF

Android--今日头条APP--高仿--ZYFNewsCTZF 图片效果:1 主页代码:MainActivity:     1.首页代码:SyFragment:             1.新闻频道代码:             2.新闻内容代码:              跳转--显示新闻详细内容              适配器--NewsBaseAdapter-NewsFragmentAdapter              entity--MyNews     2.我的代码:MyFr

[转]灯灯小程序开发手记:仿今日头条(上)

本文转自:http://www.jianshu.com/p/a1e0b8abb12d 写在前面 新的一年,祝大家新年快乐!当然对于程序员来说,新的一年,也要有新的改变.因此灯灯决定凑热闹编写微信小程序啦! 上一篇文章<记一次小程序开发过程>中,灯灯大致写了下自己第一次开发小程序的感受和流程.这一次灯灯会详细记录下自己制作一个小程序的思路.遇到的问题.涉及到的代码等和大家分享.    视频教程地址:http://study.163.com/course/introduction.htm?cour

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

vue-toutiao 这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版. 前言 本人是 今日头条 的重度用户,在学习vue.js过程中,在GitHub上看到了很多高仿webapp的好项目.由此在有了一定的技术积累后,开始构思使用Vue写今日头条,一是自己对于头条的喜爱,另外也是对于自己学习成果的检验. 技术栈 vue.js 2.0全家桶(vue.vuex.vue-router) axios.jsonp element-ui.iview vue-l

基于Vue 2.0高仿 &lt;今日头条&gt; 单页应用。

这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版. 技术栈 vue.js 2.0全家桶(vue.vuex.vue-router) axios.jsonp element-ui.iview vue-lazyload.animate.css.moment.flexible.js 在线地址 线上地址(预览地址) GitHub源码地址 说明 项目内定死 账号: admin, 密码: admin. 因为数据原因,首页请求的数据接口来自网页版今日头条,修改了一