<!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. When Programmers and Testers Collaborate

    When Programmers and Testers Collaborate Janet Gregory SOMETHING MAGICAL HAPPENS when testers and pr ...

  2. 获取系统 SID

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/hadstj/article/details/26399533 获取系统 SID ((gwmi win ...

  3. pyinstaller使用

    python pyinstaller.py [-Fw] ???.py -F 将相关配件(dll.oxc)合成到单个exe文件 -w exe启动时不打开console窗口

  4. 【Leetcode-easy】Reverse Integer

    思路:取绝对值,反转,并判断反转的结果是否大于最大整数,需要注意的细节:判断时需要这样:result > (Integer.MAX_VALUE - v) / 10 否则result * 10 + ...

  5. iOS Assertion failure in -[UITableView _classicHeightForRowAtIndexPath:]

    Assertion failure in -[UITableView _classicHeightForRowAtIndexPath:], /SourceCache/UIKit_Sim/UIKit-3 ...

  6. matlab之sum()函数

    sum(A,1):对矩阵A按照列求和: sum(A,2):对矩阵A按照行求和: 默认情况下,是按照列求和的. 举例: A=[1 2 3;1 2 3] sum(A,1)的结果: ans = 2 4 6 ...

  7. asteris录音设置

    [macro-recording] exten =>s,1,Set(CALLFILENAME=${STRFTIME(${EPOCH},UTC-8,%Y-%m-%d-%H-%M-%S)}-${CA ...

  8. CodeForces - 613D：Kingdom and its Cities（虚树+DP）

    Meanwhile, the kingdom of K is getting ready for the marriage of the King's daughter. However, in or ...

  9. ACM学习历程—ZOJ 3861 Valid Pattern Lock（dfs）

    Description Pattern lock security is generally used in Android handsets instead of a password. The p ...

  10. [转]BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...