jq+swiper 实现今日头条App的选项卡效果
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>今日头条APP顶部点击可居中导航</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.0.6/css/swiper.min.css">
<style>
* {
margin: 0;
padding: 0;
} #topNav {
width: 100%;
overflow: hidden;
font: 18px;
} #topNav .swiper-slide {
padding: 0 10px;
width: auto;
text-align: center;
} #topNav .swiper-slide span {
transition: all .3s ease;
display: block;
} #topNav .active span {
color: #FF2D2D;
border-bottom: 3px solid #FF2D2D;
} .tab-list {
display: none;
}
</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>
</div>
<div class="tab-list-box">
<div class="tab-list" style="display:block;">内容1</div>
<div class="tab-list">内容2</div>
<div class="tab-list">内容3</div>
<div class="tab-list">内容4</div>
<div class="tab-list">内容5</div>
<div class="tab-list">内容6</div>
<div class="tab-list">内容7</div>
<div class="tab-list">内容8</div>
<div class="tab-list">内容9</div>
<div class="tab-list">内容10</div>
</div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.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) {
// e.preventDefault()
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'); $(".tab-list").eq(swiper.clickedIndex).fadeIn().siblings('.tab-list').hide();
});
</script>
</body> </html>
jq+swiper 实现今日头条App的选项卡效果的更多相关文章
- tab切换的效果——仿照今日头条APP的切换效果
说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...
- android仿今日头条App、多种漂亮加载效果、选择器汇总、记事本App、Kotlin开发等源码
Android精选源码 android漂亮的加载效果 android各种 选择器 汇总源码 Android仿bilibili搜索框效果 Android记事本app.分类,涂鸦.添加图片或者其他附件 仿 ...
- 山寨今日头条的标题title效果
山寨今日头条的标题title效果 效果: 源码: // // ViewController.m // 今日头条 // // Created by YouXianMing on 14/11/26. // ...
- Android之仿今日头条顶部导航栏效果
随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...
- 仿今日头条app手机端顶部触屏滑动导航
swiper.js <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 今日头条移动app广告激活数据API对接完整Java代码实现供大家参考》》》项目随记
这是自毕业后的第一篇博客,希望自己今后能养成写博客的一个好习惯.最近公司为了加速APP推广,采取在外部平台(如:今日头条)进行广告投放的方式,进行用户引流.因此我们需要对广告的激活数据进行一个检测,跟 ...
- 今日头条极速版邀请码以及其它APP邀请码大全
现在大多手机新闻APP都需要输入码,在网上找了很久,最终找到一个比较全的文章,本人试过,都是可以使用的! 第1个比较好,可边看新闻,边收益!嘻嘻!平时写代码累了,休息刷一下!或者在睡觉前刷新一下,每天 ...
- 自定义控件实现-今日头条Android APP图集效果
前提 产品有个新需求,类似今日头条的图集效果 大致看了下UI,大致就是ViewPager,横向滑动切换图片,纵向滑动移动图片,纵向超过一定距离,图片飞出,图集淡出动画退出,支持图片的双击放大. 思路 ...
- 今日头条- iOS客户端 启动速度优化实践
版权声明 作者:今日头条iOS团队 原文:https://techblog.toutiao.com/2017/01/17/iosspeed/ 应用启动时间,直接影响用户对一款应用的判断和使用体验.头条 ...
随机推荐
- windows7平台android studio新建Android项目,报错
Failed to install the following Android SDK packages as some licences have not been accepted. platfo ...
- Centos7 搭建wordpress
WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站.也可以把 WordPress当作一个内容管理系统(CMS)来使用. 搭建WordP ...
- org.springframework.web.method.ControllerAdviceBean#isApplicableToBeanType 作用
org.springframework.web.method.ControllerAdviceBean#isApplicableToBeanType(@Nullable Class<?> ...
- jQuery-webcam使用
基本页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
- Python3基础 内置函数 eval str转为list tuple dict
Python : 3.7.3 OS : Ubuntu 18.04.2 LTS IDE : pycharm-community-2019.1.3 ...
- 转 zabbix 自动发现和 zabbix自定义用户key与参数User parameters
########31 https://www.cnblogs.com/yjt1993/p/10883345.html 1.概念 在配置Iterms的过程中,有时候需要对类似的Iterms进行添加,这些 ...
- Golang 实现UDPServer并发送消息到ActiveMQ
示例代码 package main import ( "net" "os" "github.com/gpmgo/gopm/modules/goconf ...
- LeetCode_459. Repeated Substring Pattern
459. Repeated Substring Pattern Easy Given a non-empty string check if it can be constructed by taki ...
- 简单工厂(三)——JDK源码中的简单工厂
private static Calendar createCalendar(TimeZone zone,Locale aLocale) { CalendarProvider provider = L ...
- 搭建ELK日志分析平台
(上)—— ELK介绍及搭建 Elasticsearch 分布式集群 http://blog.51cto.com/zero01/2079879 (下)—— 搭建kibana和logstash服务器 h ...