基于JavaScript实现移动端TAB触屏切换效果


Posted in Javascript onOctober 20, 2015

展示效果图如下所示:

基于JavaScript实现移动端TAB触屏切换效果

效果演示 源码下载

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

HTML

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

<div class="box-163css"> 
  <ul id="pagenavi" class="page"> 
    <li><a href="#https://3water.com/css.html" class="active">CSS3</a></li> 
     <li><a href="#https://3water.com/jquery.html">JAVASCRIPT</a></li> 
    <li><a href="#https://3water.com/php.html">PHP</a></li> 
    <li><a href="#https://3water.com/web.html">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样式,本例已打包好css文件供大家下载。

JAVASCRIPT

由于是移动端应用,我们加载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>

以上内容是本文的全部叙述,希望对大家学习有所帮助。

Javascript 相关文章推荐
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
document.write的几点使用心得
May 14 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 #Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 #Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 #Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 #Javascript
JavaScript实现的简单烟花特效代码
Oct 20 #Javascript
require.js的用法详解
Oct 20 #Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 #Javascript
You might like
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
基于jQuery的表格操作插件
2010/04/22 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
如何开发安全的AJAX应用
2014/03/26 面试题
银行毕业实习自我鉴定
2013/09/19 职场文书
标准毕业生自荐信范文
2013/11/04 职场文书
高二地理教学反思
2014/01/24 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
护士先进个人总结
2015/02/13 职场文书
三国演义读书笔记
2015/06/25 职场文书
Mysql Show Profile
2021/04/05 MySQL
代码解析React中setState同步和异步问题
2021/06/03 Javascript
Python绘画好看的星空图
2022/03/17 Python