移动端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 ...

随机推荐

python mmap使用记录
1.写文件 with open('??', 'r+b') as f: with contextlib.closing(mmap.mmap(f.fileno(), size, flags=mmap.MA ...
DataGridView自定义RichTextBox列
https://www.codeproject.com/Articles/31823/RichTextBox-Cell-in-a-DataGridView-2 RichText是用图片显示的,当Sel ...
AnkhSVN
安装和配置签入签出问题 1.安装和配置 ①安装.(貌似默认的安装到C:\Program Files\AnkhSVN 2下,开始菜单也没快捷?) ②源代码管理器设置:打开vs2012,工具→选项→源代 ...
shell之起步
初学者,先不要考虑好不好看,效率高不高!先要实现需求!需求是第一位! grep.sed.awk.三剑客! 学好shell,需要前提! 1.linux系统命令熟练 2.搞清楚正则,grep.sed.aw ...
hdu 1002 A + B Problem II（大数）
题意:就是求a+b (a,b都不超过1000位) 思路:用数组存储第一道大数的题目,虽然很水,纪念一下! 代码: #include<cstdio> #include<cstring ...
python3 - 商品管理的程序，商品信息都存在一个json串里面
商品管理的程序,商品信息都存在一个json串里面 1.查询商品信息 #校验商品是否存在 2.新增商品 # #校验商品是否存在 #校验价格是否合法 3.修改商品信息 ##校验商品是否存在 if chic ...
tensorflow 实现逻辑回归——原以为TensorFlow不擅长做线性回归或者逻辑回归，原来是这么简单哇！
实现的是预测低出生体重的概率.尼克·麦克卢尔(Nick McClure). TensorFlow机器学习实战指南 (智能系统与技术丛书) (Kindle 位置 1060-1061). Kin ...
python基础-私有变量和方法
如果要让内部属性不被外部访问,可以把属性的名称前加上两个下划线__,在Python中,实例的变量名如果以__开头,就变成了一个私有变量(private),只有内部可以访问,外部不能访问 __priva ...
Eclipse_插件_03_反编译插件_Eclipse Class Decompiler
一.插件优势此插件比jd-eclipse更加强大,反编译之后不会像jd-eclipse一样出现注释符号. 二.插件下载地址 1.github https://github.com/cnfree/Ec ...
linux命令学习笔记(24)：Linux文件类型与扩展名
Linux文件类型和Linux文件的文件名所代表的意义是两个不同的概念.我们通过一般应用程序而创建的比如file.txt.file.tar.gz ,这些文件虽然要用不同的程序来打开,但放在Linux ...

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

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

随机推荐

热门专题