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. Ireport启动错误

    问题描述:cannot find java.exe Neither (null)\jre\bin\java.exe nor (null)\bin\java.exe exits 解决办法: 打开Irep ...

  2. 【转】.NET程序员提高效率的70多个开发工具

    原文:.NET程序员提高效率的70多个开发工具 工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢?本文为各ASP.NET 开发者介绍一些高效实用的工具,涉及SQL 管理,VS插件 ...

  3. .NET Core 微服务实例

    关于微服务,MSDN给出了定义和架构图:https://docs.microsoft.com/zh-cn/azure/architecture/guide/architecture-styles/mi ...

  4. 31. pt-variable-advisor

    pt-variable-advisor h=192.168.100.101,P=3306,u=admin,p=admin mysqladmin var>/root/test/pt-variabl ...

  5. buffer IO和direct IO

    最近在看很多框架,redis,kafka等底层都涉及到文件IO操作的效率问题,所以查了些资料,看到这篇文章讲的比较明白些,贴出来留存. 链接地址: https://www.ibm.com/develo ...

  6. ef 连接mysql,code first

    方法“MySql.Data.MySqlClient.MySqlProviderServices.GetDbProviderManifestToken(System.Data.Common.DbConn ...

  7. AspNet Core 认证

    一 Cookie认证 1  services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme).AddCooki ...

  8. Maven引入自定义jar包

    1.将项目打成jar包  或者下载某个jar包  放在某个目录下(随便吧,桌面也行),这里是放在F:/  jar包为 alipay.jar 2.给jar包取个名字   用原名也行(maven打包默认会 ...

  9. Redis详细讲解(Redis原理,Redis安装,Redis配置,Redis使用,Redis命令)

    一.Redis介绍 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发 ...

  10. MySQL中的latch(闩锁)详解——易产生的问题以及原因分析

    Latch 什么是latch: 锁是数据库系统区别与文件系统的一个关键特性.锁机制用于管理对共享资源的并发访问.Innodb存储引擎在行级别上对表数据上锁,这固然不错.但是Innodb也会在多个地方使 ...