jquery移动端TAB触屏切换实现效果


Posted in Javascript onDecember 22, 2020

我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目,如网易新闻等APP栏目切换。我们说的TAB一般由导航条和TAB对应的内容组成,切换导航条上的标签同时标签对应的内容也会跟着切换。本文将结合实例给大家介绍一个移动端TAB触屏切换效果。

我们准备一个TAB导航#pagenavi,里面包含TAB导航要切换的四个导航按钮,然后是切换的主体内容#slider,这里应该放置四个li与导航按钮对应,内容自定义。

<div class="box-163css"> 
 <ul id="pagenavi" class="page"> 
 <li><a href="#">CSS3</a></li> 
 <li><a href="#">JAVASCRIPT</a></li> 
 <li><a href="#">PHP</a></li> 
 <li><a href="#">HTML5</a></li> 
 </ul> 
 <div id="slider" class="swipe"> 
 <ul class="box01_list"> 
 <li class="li_list"> 
 ... 
 </li> 
 ...<!--总共4个li--> 
 </ul> 
 </div> 
</div>

当然,我们还需要给HTML加上css样式,这块根据自己的习惯爱好进行设置。

由于是移动端应用,我们加载zepto.js,zepto就是体积小的jquery。然后需要加载触屏滑动插件touchslider.js

<script type="text/javascript" src="js/zepto_min.js"></script> 
<script type="text/javascript" src="js/touchslider.js"></script>

接下来我们就直接调用TouchSlider,通过设置绑定tab,滑动方向、速度、时间等信息实现内容切换,请看详细代码:

<script type="text/javascript"> 
 var page='pagenavi'; 
 var mslide='slider'; 
 var mtitle='emtitle'; 
 arrdiv = 'arrdiv'; 
 
 var as=document.getElementById(page).getElementsByTagName('a'); 
 
 var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){ 
 var as=document.getElementById(this.page).getElementsByTagName('a'); 
 as[this.p].className=''; 
 as[index].className='active'; 
 this.p=index; 
 var txt=as[index].innerText; 
 $("#"+this.page).parent().find('.emtitle').text(txt); 
 var txturl=as[index].getAttribute('href'); 
 var turl=txturl.split('#'); 
 $("#"+this.page).parent().find('.go_btn').attr('href',turl[1]); 
 }}); 
 
 tt.page = page; 
 tt.p = 0; 
 for(var i=0;i<as.length;i++){ 
 (function(){ 
 var j=i; 
 as[j].tt = tt; 
 as[j].onclick=function(){ 
 this.tt.slide(j); 
 return false; 
 } 
 })(); 
 } 
</script>

以上就是关于移动端TAB触屏切换效果的关键代码分享给大家,希望大家喜欢。

Javascript 相关文章推荐
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 #Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 #Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 #Javascript
php利用curl获取远程图片实现方法
Oct 26 #Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 #Javascript
JavaScript中的数据类型转换方法小结
Oct 26 #Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 #Javascript
You might like
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
php缓存技术详细总结
2013/08/07 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
javascript如何创建对象
2016/08/29 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
webpack4简单入门实例
2018/09/06 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
js实现转动骰子模型
2019/10/24 Javascript
Python最长公共子串算法实例
2015/03/07 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
基于Python的OCR实现示例
2020/04/03 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
普通党员四风问题对照检查材料
2014/09/27 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
英雄儿女观后感
2015/06/09 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电