基于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 Tools tab使用介绍
Jul 14 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
javascript的函数作用域
Nov 12 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
Python制作简单的网页爬虫
2015/11/22 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python工厂函数用法实例分析
2018/05/14 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
一道Delphi面试题
2016/10/28 面试题
法律进社区实施方案
2014/03/21 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
2014年售票员工作总结
2014/11/19 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书