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

随机推荐

对A轮的追逐变得越加狂热，当前距离互联网泡沫到底有多近？
编者注:本文来自TOMASZ TUNGUZ,中文版由天地会珠海分舵进行编译. 依据NVCA披露的最新数据,在2015年第二季度.VC总共进行了167亿美元的投资,大约是2000年互联网泡沫时候同期的6 ...
java基础之容器、集合、集合常用方法
一.容器(Collection):数组是一种容器,集合也是一种容器 java编程中,装其他各种各样的对象(引用类型)的一种东西,叫容器注意: 1.数组的长度是固定的 2.集合:长度不固定, 可以随时 ...
前端JSONPJIE解决跨域问题
解决同源策略的两个方法 1 . JSONP jsonp (将 JSON 数据填充进回调函数,这就是JSONP的JSON+Padding 的含义) jsonp是json用来跨域的一个东西,原理是通过sc ...
7-3 堆栈模拟队列（25 point(s)）【数据结构】
7-3 堆栈模拟队列(25 point(s)) 设已知有两个堆栈S1和S2,请用这两个堆栈模拟出一个队列Q. 所谓用堆栈模拟队列,实际上就是通过调用堆栈的下列操作函数: int IsFull(Stac ...
验证控件 .net
检查Page.IsValid if (typeof (Page_ClientValidate) == 'function') { Page_ClientValidat ...
Contiki-Timer 概述
Contiki有一个clock模块和一系列timer模块:timer,stimer,ctimer,etimer,和rtimer. 一.clock模块 clock模块提供一些处理系统时间的函数,还有一些 ...
BZOJ 1041 [HAOI2008]圆上的整点：数学【费马平方和定理】
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1041 题意: 给定n(n <= 2*10^9),问你在圆x^2 + y^2 = n^ ...
BZOJ 1638 [Usaco2007 Mar]Cow Traffic 奶牛交通：记忆化搜索【图中边的经过次数】
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1638 题意: 给你一个有向图,n个点,m条有向边. 对于所有从入度为0的点到n的路径,找出 ...
javascript(7)
js中基于对象==js面向对象 js中没有类class,但是它 JavaScript是一种面向(基于)对象的动态脚本语言,是一种基于对象和事件驱动并具有安全性能的脚本语言.它具有面向对象语言所特有的各 ...
TP框架控制器和对应方法创建
控制器和对应方法创建控制器是MVC模式中的核心,TP默认有一个控制器: Index控制器里面有一个操作方法:Index 我们在访问http://localhost:8080/Thinkphp ...

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

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

随机推荐

热门专题