<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>滚动</title>

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />

    <script type="text/javascript" src="./js/jquery.min.js"></script>

</head>

<style type="text/css">

body,

html {

    margin: 0;

    padding: 0;

}

.box {

    overflow: hidden;

    position: relative;

    height: 44px;

}

.boxChild {

    position: absolute;

    left: 0px;

    top: 0px;

}

.tabs-wrap {

    height: 44px;

    line-height: 44px;

    font-size: 18px;

    color: #999;

    width: 100vw;

    top: 0;

    left: 0;

    display: flex;

}

.tabs-wrap .tab {

    float: left;

    flex: 1;

    text-align: center;

    font-size: 16px;

    /*background: pink;*/

}

.tabs-wrap .tab.current {

    color: #333;

}

.tabs-wrap .tab-line {

    height: 2px;

    background: #f44;

    width: 200px;

    position: absolute;

    bottom: 0;

    transition-duration: 0.3s;

}

</style>

<body>

    <div class="box" id="box">

        <div class="boxChild" id="boxChild">

            <div class="tabs-wrap" id="wrap">

                <div class="tab">一年级1</div>

                <div class="tab">二年级2</div>

                <div class="tab">三年级3</div>

                <div class="tab">四年级4</div>

                <div class="tab">五年级5</div>

                <div class="tab">六年级6</div>

                <div class="tab">七年级7</div>

                <div class="tab">综合提升8</div>

                <div class="tab">高一9</div>

                <div class="tab">高二10</div>

                <div class="tab">高三11</div>

                <div class="tab">大一12</div>

                <div class="tab">大二13</div>

                <div class="tab">大三14</div>

                <div class="tab">大四15</div>

                <div class="tab-line"></div>

            </div>

        </div>

    </div>

    <div class="tabCentent">

        <div class="tab_pane">1111111</div>

        <div class="tab_pane">22222</div>

        <div class="tab_pane">333333</div>

        <div class="tab_pane">4444444</div>

        <div class="tab_pane">5555</div>

    </div>

</body>

</html>

<script type="text/javascript">

var tabLen, fourW, surpassFourW, halfScreenW, screenW, tabLineW, tabW;

screenW = screen.width;

halfScreenW = screen.width / 2;

tabLen = $('.tabs-wrap .tab').length; //

if (tabLen > 5) {

    $('.tabs-wrap .tab').css('flex', '0 0 22%');

}

tabW = screenW * 0.22

tabLineW = screenW * 0.22 * 0.5;

$('.boxChild').css('width', tabW * tabLen)

$('.tabs-wrap .tab-line').css('left', tabLineW * 0.5)

$('.tab-line').css({ 'width': tabLineW });

$('.tabs-wrap').on('click', '.tab', function() {

    var index = $(this).index('.tab');

    // console.log(index)

    var tabLineLeft = index * tabW + tabLineW * 0.5;

    // console.log(index*tabW)

    // console.log(tabLineLeft)

    $('.tabs-wrap .tab-line').css('left', tabLineLeft)

})

var donwLeft;

var donwX;

var boxChild = document.getElementById('boxChild');

var downTime = 0;

boxChild.addEventListener('touchstart', function(ev) {

    var touchs = ev.changedTouches[0];

    donwX = touchs.pageX;

    donwLeft = this.offsetLeft;

    downTime = Date.now();

})

boxChild.addEventListener('touchmove', function(ev) {

    var touchs = ev.changedTouches[0];

    if (this.offsetLeft >= 0) {

        this.style.left = (touchs.pageX - donwX) / 3 + 'px';

    } else if (this.offsetLeft <= screenW - this.offsetWidth) {

        this.style.left = donwLeft + (touchs.pageX - donwX) / 3 + 'px';

    } else {

        this.style.left = donwLeft + (touchs.pageX - donwX) + 'px';

    }

    // this.style.left =donwLeft + touchs.pageX - donwX+'px';

})

boxChild.addEventListener('touchend', function(ev) {

    var endSign = false;

    var touchs = ev.changedTouches[0];

    if (this.offsetLeft >= 0) {

    	console.log('第一种')

        this.style.left = '0px'

    } else if (this.offsetLeft <= screenW - this.offsetWidth) {

    	console.log('第二种')

        this.style.left = screenW - this.offsetWidth + 'px'

    } else if (Date.now() - downTime < 300) {

        $(this).animate({ 'left': donwLeft + (touchs.pageX - donwX) * 3 });

        endSign = true;

        console.log('haha')

    }

    // console.log( Date.now() - downTime)

    // console.log(screenW - this.offsetWidth)

    console.log('多拖吧')

    console.log((donwLeft + (touchs.pageX - donwX)))

    console.log((donwLeft + (touchs.pageX - donwX) * 3) >= 0);

    if (endSign) {

    	 console.log('xixi')

        if ((donwLeft + (touchs.pageX - donwX) * 3) >= 0) {

            this.style.left = '0px';

            // alert(1)

        } else if ((donwLeft + (touchs.pageX - donwX) * 3) <= screenW - this.offsetWidth) {

            this.style.left = screenW - this.offsetWidth + 'px';

            // alert(2)

        }

    }

})

</script>

移动端tab目录(有待完善)的更多相关文章

  1. 移动端tab滑动和上下拉刷新加载

    移动端tab滑动和上下拉刷新加载 查看demo(请在移动端模式下查看) 查看代码 开发该插件的初衷是,在做一个项目时发现现在实现移动端tab滑动的插件大多基于swiper,swiper的功能太强大而我 ...

  2. 一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏

    一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...

  3. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  4. Linux使用rsync客户端与服务端同步目录进行备份

    一.服务端设置 1. 修改 server 端配置 # vi /etc/rsyncd.conf 修改: uid = nobody # 该选项指定当该模块传输文件时守护进程应该具有的uid.默认值为&qu ...

  5. 使用swiper.js实现移动端tab切换

    在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...

  6. 移动端tab切换时下划线的滑动效果

    1.当前 tab 出现下划线的同时,前一个下划线同时消失(出现方向与消失方向保持一致),伴随过渡效果. <!DOCTYPE html><html lang="en" ...

  7. JS控制TABLE表格在任意一行下面添加一行（有待完善）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. C#操作Excel，对Sheet插入次序的控制 (有待完善)

    C#对Excel文件的操作,插入工作表(Worksheet)的方法是 Workbook.Worksheets.Add().通常情况下,我们在EXCEL的工作薄中,使用菜单操作:插入一个新的工作表,那么 ...

  9. 杨辉三角（hdu2032）——有待完善

    思考:杨辉三角形 #include<stdio.h> #include<cstring> int main() { int n; char d; ][] = {}; while ...

随机推荐

  1. ajax实时获取下拉数据

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ajax ...

  2. SIFT算法详解(转)

    原文地址 http://blog.csdn.net/pi9nc/article/details/23302075 尺度不变特征变换匹配算法详解 Scale Invariant Feature Tran ...

  3. 【docker】开启remote api访问，并使用TLS加密

    背景: docker默认是能使用本地的socket进行管理,这个在集群中使用的时候很不方便,因为很多功能还是需要链接docker服务进行操作,docker默认也可以开启tcp访问,但是这就相当于把整个 ...

  4. Java for LeetCode 083 Remove Duplicates from Sorted List

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  5. PAT天梯赛 L2-002. 链表去重 【STL】

    题目链接 https://www.patest.cn/contests/gplt/L2-002 思路 用结构体 存储 一个结点的地址 值 和下一个地址 然后从首地址开始 往下走 并且每个值的绝对值 都 ...

  6. jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'style' of undefined

    原因:datatable表格内容有操作列,而表头没有定义操作列 少写了一行:<th>操作</th>

  7. Codeforces 872C Maximum splitting：数学【分解成合数之和】

    题目链接:http://codeforces.com/contest/872/problem/C 题意: 给你一个数n,问你最多能将n分解成多少个合数之和.(若不能分解,输出-1) 题解: 若要让合数 ...

  8. Java 吃货联盟

    import java.util.Scanner; public class Shao {  private static final int[] dishNames = null;  private ...

  9. 小程序js页面设置上导航颜色

    //导航条颜色更改 wx.setNavigationBarColor({ frontColor: '#ffffff', // 必写项 backgroundColor: '#008de6', // 必写 ...

  10. Highcharts小数保留两位方法

    tooltip: { valueSuffix: '%', formatter:function(){ return''+this.series.name+' '+Highcharts.numberFo ...