移动端tab目录(有待完善)

<!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目录(有待完善)的更多相关文章

移动端tab滑动和上下拉刷新加载
移动端tab滑动和上下拉刷新加载查看demo(请在移动端模式下查看) 查看代码开发该插件的初衷是,在做一个项目时发现现在实现移动端tab滑动的插件大多基于swiper,swiper的功能太强大而我 ...
一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏
一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...
基于zepto的H5/移动端tab切换触摸拖动加载更多数据
以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...
Linux使用rsync客户端与服务端同步目录进行备份
一.服务端设置 1. 修改 server 端配置 # vi /etc/rsyncd.conf 修改: uid = nobody # 该选项指定当该模块传输文件时守护进程应该具有的uid.默认值为&qu ...
使用swiper.js实现移动端tab切换
在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...
移动端tab切换时下划线的滑动效果
1.当前 tab 出现下划线的同时,前一个下划线同时消失(出现方向与消失方向保持一致),伴随过渡效果. <!DOCTYPE html><html lang="en" ...
JS控制TABLE表格在任意一行下面添加一行（有待完善）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
C#操作Excel，对Sheet插入次序的控制 (有待完善)
C#对Excel文件的操作,插入工作表(Worksheet)的方法是 Workbook.Worksheets.Add().通常情况下,我们在EXCEL的工作薄中,使用菜单操作:插入一个新的工作表,那么 ...
杨辉三角（hdu2032）——有待完善
思考:杨辉三角形 #include<stdio.h> #include<cstring> int main() { int n; char d; ][] = {}; while ...

随机推荐

CUDA：流
1. 页锁定主机内存 c库函数malloc()分配标准的,可分页(Pagable)的内存,cudaHostAlloc()分配页锁定的主机内存.页锁定内存也称为固定内存(Pinned Memory)或者 ...
IOS AFNetWorking 设置超时时间
(原创经验总结) 1.关于AF 超时的说法系统默认的timeInterval 是60s ASI默认是10s 但是有一个说法是 AF “AFN在GET条件下设置的NSURLRequest能起作用, ...
20145239杜文超《Java程序设计》第8周学习总结
20145239 <Java程序设计>第8周学习总结教材学习内容总结通用API 日志API 1.java.util.logging包提供了日志功能相关类与接口,使用日志的起点是logg ...
《CSS权威指南（第三版）》---第四章值和单位
本章主要讲解的是一些属性声明用的值: CSS中的值主要有数字,百分数,颜色, 1.颜色: rgb(100%,100%,100%) OR rgb(255,255,255) OR #FF0000 WE ...
IIS反向代理实现Revel域名访问
Revel实现域名访问 1.在cmd中启动revel项目,我设置的端口为8000 2.下载IIS的Application Request Routing Cache组件下载地址 3.安装ARR 4.打 ...
python之tkinter_2
关于tkinter的组件介绍,这篇博客很详细: https://www.cnblogs.com/aland-1415/p/6849193.html tkinter is to make interfa ...
EOF的使用
1.我疑惑了 char a[20]; while(scanf("%s",a)!=EOF){ cout<<"hello"<<endl; } ...
elasticsearch _source字段的一些说明
_source field The _source field contains the original JSON document body that was passed at index ti ...
Java集合的有序无序问题和线程安全与否问题
首先,清楚有序和无序是什么意思: 集合的有序.无序是指插入元素时,保持插入的顺序性,也就是先插入的元素优先放入集合的前面部分. 而排序是指插入元素后,集合中的元素是否自动排序.(例如升序排序) 1.有 ...
C/C++协程的实现方式总结
1.利用 C 语言的 setjmp 和 longjmp,函数中使用 static local 的变量来保存协程内部的数据. 函数原型:int setjmp(jmp_buf envbuf); void ...

移动端tab目录(有待完善)

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

随机推荐

热门专题