基于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 相关文章推荐
Javascript学习笔记2 函数
Jan 11 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 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
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
详解数组Array.sort()排序的方法
2020/05/09 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python类属性与实例属性用法分析
2015/05/09 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
元旦晚会感言
2014/03/12 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
会计专业自荐信范文
2015/03/05 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
ant design charts 获取后端接口数据展示
2022/05/25 Javascript