仿今日头条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>
仿今日头条app手机端顶部触屏滑动导航的更多相关文章
- 手机端Swiper 触屏滑动
在线实例 默认 响应式 垂直 空间间隔 滚动 自动滚动 中心化 中心化自动 免费模式 多个滚动 水平滚动 grab-cursor 使用方法 <div class="swiper-con ...
- android仿今日头条App、多种漂亮加载效果、选择器汇总、记事本App、Kotlin开发等源码
Android精选源码 android漂亮的加载效果 android各种 选择器 汇总源码 Android仿bilibili搜索框效果 Android记事本app.分类,涂鸦.添加图片或者其他附件 仿 ...
- 手机端html5触屏事件(touch事件)
touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...
- (转)手机端html5触屏事件(touch事件)
本文转载自:http://blog.sina.com.cn/s/blog_51048da70101f0ex.html touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时 ...
- 转:手机端html5触屏事件(touch事件)
touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...
- 自适应 Tab 宽度可以滑动文字逐渐变色的 TabLayout(仿今日头条顶部导航)
TabLayout相信大家都用过,2015年Google大会上发布了新的Android Support Design库里面包含了很多新的控件,其中就包含TabLayout,它可以配合ViewPager ...
- vue2.0仿今日头条开源项目
vue-toutiao 这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版. 前言 本人是 今日头条 的重度用户,在学习vue.js过程中,在GitHub ...
- [Android] Android 手机下 仿 今日头条 新闻客户端
利用一个月的时间,自学了 Android 开发 ,为了检验学习成果,特意 开发了这个 仿 今日头条 新闻客户端 AppNews 包括图文新闻+视频新闻+图片新闻 预览演示如下: 功能说明: 1)底部 ...
- jq+swiper 实现今日头条App的选项卡效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- Ireport启动错误
问题描述:cannot find java.exe Neither (null)\jre\bin\java.exe nor (null)\bin\java.exe exits 解决办法: 打开Irep ...
- 【转】.NET程序员提高效率的70多个开发工具
原文:.NET程序员提高效率的70多个开发工具 工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢?本文为各ASP.NET 开发者介绍一些高效实用的工具,涉及SQL 管理,VS插件 ...
- .NET Core 微服务实例
关于微服务,MSDN给出了定义和架构图:https://docs.microsoft.com/zh-cn/azure/architecture/guide/architecture-styles/mi ...
- 31. pt-variable-advisor
pt-variable-advisor h=192.168.100.101,P=3306,u=admin,p=admin mysqladmin var>/root/test/pt-variabl ...
- buffer IO和direct IO
最近在看很多框架,redis,kafka等底层都涉及到文件IO操作的效率问题,所以查了些资料,看到这篇文章讲的比较明白些,贴出来留存. 链接地址: https://www.ibm.com/develo ...
- ef 连接mysql,code first
方法“MySql.Data.MySqlClient.MySqlProviderServices.GetDbProviderManifestToken(System.Data.Common.DbConn ...
- AspNet Core 认证
一 Cookie认证 1 services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme).AddCooki ...
- Maven引入自定义jar包
1.将项目打成jar包 或者下载某个jar包 放在某个目录下(随便吧,桌面也行),这里是放在F:/ jar包为 alipay.jar 2.给jar包取个名字 用原名也行(maven打包默认会 ...
- Redis详细讲解(Redis原理,Redis安装,Redis配置,Redis使用,Redis命令)
一.Redis介绍 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发 ...
- MySQL中的latch(闩锁)详解——易产生的问题以及原因分析
Latch 什么是latch: 锁是数据库系统区别与文件系统的一个关键特性.锁机制用于管理对共享资源的并发访问.Innodb存储引擎在行级别上对表数据上锁,这固然不错.但是Innodb也会在多个地方使 ...