基于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="#http://www.jb51.net/css.html" class="active">CSS3</a></li>
     <li><a href="#http://www.jb51.net/jquery.html">JAVASCRIPT</a></li>
    <li><a href="#http://www.jb51.net/php.html">PHP</a></li>
    <li><a href="#http://www.jb51.net/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>

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

赞 (0)

相关推荐

  • js完美的div拖拽实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例

    JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例

    本文实例讲述了JS+CSS实现仿触屏手机拨号盘界面及功能模拟的方法.分享给大家供大家参考.具体如下: 首先来看一下运行效果图: 具体实现代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

  • js 表格排序(编辑+拖拽+缩放)

    Table body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ over

  • javascript实现移动端上的触屏拖拽功能

    javascript实现移动端上的触屏拖拽功能

    本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi

  • js实现滑动触屏事件监听的方法

    本文实例讲述了js实现滑动触屏事件监听的方法.分享给大家供大家参考.具体实现方法如下: function span_move_fun(){ var span = document.getElementById("move_k"); var span_left = $(span).offset().left; var span_top = $(span).offset().top; var start_left = $(span).offset().left; var start_top

  • js最简单的拖拽效果实现代码

    其实对于弹出层而言,拖拽最初的目的很单纯,就是为了通过拉开层,使被弹出层挡住的内容可见,(当然,后来关于拖拽的功能不断被优化,使得拖拽的应用有了别的意义,最典型的如igoogle的自定义首页,通过拖放的形式满足用户自定义想要的内容模块顺序和位置). 本文讨论的重点不是iGoogle的拖放效果,那属于进阶篇,本文是拖拽的"第一阶",如题,实现最简单的拖拽. 这里的"最简单"即不考虑多个拖拽层的堆叠顺序,不考虑拖拽范围限制,不考虑类似iGoogle的"drag

  • javascript拖拽上传类库DropzoneJS使用方法

    用法 1. add js and css style 复制代码 代码如下: <link href="~/Dropzone/css/basic.css" rel="stylesheet" /> <link href="~/Dropzone/css/dropzone.css" rel="stylesheet" /> <script src="~/Dropzone/dropzone.min.j

  • js实现touch移动触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个好像比较少用 每个触摸事件被触发

  • 触屏中的JavaScript事件分析

    本文实例讲述了触屏中的JavaScript事件.分享给大家供大家参考.具体分析如下: 一.触摸事件 ontouchstart ontouchmove ontouchend ontouchcancel目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1 实例如下: /** * onTouchEvent */ v

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

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

    展示效果图如下所示: 效果演示 源码下载 我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目,如网易新闻等APP栏目切换.我们说的TAB一般由导航条和TAB对应的内容组成,切换导航条上的标签同时标签对应的内容也会跟着切换.本文将结合实例给大家介绍一个移动端TAB触屏切换效果. HTML 我们准备一个TAB导航#pagenavi,里面包含TAB导航要切换的四个导航按钮,然后是切换的主体内容#slider,这里应该放置四个li与导航按钮对应,内容自定义. <div class="box-

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

    我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目,如网易新闻等APP栏目切换.我们说的TAB一般由导航条和TAB对应的内容组成,切换导航条上的标签同时标签对应的内容也会跟着切换.本文将结合实例给大家介绍一个移动端TAB触屏切换效果. 我们准备一个TAB导航#pagenavi,里面包含TAB导航要切换的四个导航按钮,然后是切换的主体内容#slider,这里应该放置四个li与导航按钮对应,内容自定义. <div class="box-163css"> <ul id

  • JavaScript实现的简单Tab点击切换功能示例

    JavaScript实现的简单Tab点击切换功能示例

    本文实例讲述了JavaScript实现的简单Tab点击切换功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <title>www.jb51.net tab点击切换</title> <style type="text/css"> *{ padding: 0; margin: 0; } #example{ width: 500px; height: 400px; mar

  • 基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    内容滑动切换应用非常广,常见的有幻灯片焦点图.画廊切换等.随着WEB前端技术的广泛应用,内容滑动切换效果占据着web页面重要地位,因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程. 先给大家展示下效果图,感觉还不错请参数实现代码,具体效果如下所示: 效果展示      源码下载 本次教程分三个部分: 1.使用jQuery开发基本的内容滑动切换效果, 2.支持移动端触控自适应的内容滑动切换效果, 3.封装内容滑动切换效果jQuery插件. 本文讲解第一部分,

  • JS实现淡蓝色简洁竖向Tab点击切换效果

    JS实现淡蓝色简洁竖向Tab点击切换效果

    本文实例讲述了JS实现淡蓝色简洁竖向Tab点击切换效果.分享给大家供大家参考.具体如下: 这里介绍一款淡蓝色竖向简洁Tab,选项卡,是很多人都喜欢的一种风格. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-blue-v-tab-cha-style-menu-codes/ 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content=&qu

  • vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

    最近公司的产品上线,一些高级功能在基础版本中不对用户开发,通过视频的形式展示. 产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件,通过 demo案例很快实现了视频播放效果 <video-player class="vjs-custom-skin" ref="videoPlayer1" :options="playerOptions" :playsinline="true" :even

  • 基于jquery实现鼠标滚轮驱动的图片切换效果

    基于jquery实现鼠标滚轮驱动的图片切换效果

    jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个基于鼠标滚轮驱动的图片切换效果. 本例实现的效果: 鼠标滚轮滚动时图片进行切换. 支持键盘方向键实现图片切换效果. 支持点击图片切换,支持点击当前图片链接. 进度条滑块展示图片图片数量进度. XHTML <div class="demo"> <div id="imageflow"> <div id="loading">&l

  • js实现鼠标单击Tab表单切换效果

    js实现鼠标单击Tab表单切换效果

    本文实例为大家分享了js实现鼠标单击Tab表单切换展示的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; border:0; } body{ text

  • 详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）

    详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）

    在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件. 因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使用的是动态组件实现,如果是在大型应用上,可能使用 vue-router 会方便一些. 先看下最终实现的效果,结构比较简单,顶部的三个 Tab 标签用于切换,内容区域分别为三个子组件. 效果预览 关键代码及分析如下: <template> // 每一个 tab 绑定了一个点击事件,传入的参数对应着

  • 基于JavaScript实现移动端无限加载分页

    本文实例为大家分享了js实现移动端无限加载分页的具体代码,供大家参考,具体内容如下 原理:当滚动条到达底部时,执行下一页内容. 判断条件需要理解三个概念:     1.scrollHeight 真实内容的高度     2.clientHeight 视窗的高度,即在浏览器中所能看到的内容的高度     3.scrollTop 视窗上面隐藏掉的部分,即滚动条滚动的距离 思路: 1.使用fixed定位加载框     2.使用$(window).scroll();方法来触发是否加载     3.通过 真

随机推荐