移动端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 ...
随机推荐
- PowerDesigner 125 导致 Word 2007文档内容无法选中以及点击鼠标没用
- abap 打开文件对话框
[转自 http://blog.csdn.net/zhongguomao/article/details/6712576] *----------------------- Method 1 ---- ...
- Flask简介
一. Python 现阶段三大主流Web框架 Django Tornado Flask 对比 1.Django 主要特点是大而全,集成了很多组件,例如: Models Admin Form 等等, 不 ...
- 在win7下使用git和gitlab进行code review
1.安装 Git-2.6.3-64-bit.exe 下载地址:http://pan.baidu.com/s/1hqGvwnq 2.根据收到的邮件进入gitlab网站,并修改密码登陆 3.新建一个文件 ...
- 《高性能Javascript》 Summary（三）
第八章.编程实践 Programming Practices 经验: 避免使用 eval_r()和Function构造器避免二次评估.此外,给setTimeout()和setInterval()函数传 ...
- Linux2.4文件系统中vfsmount、安装点的dentry、设备的dentry之间的关系【转】
本文转载自:https://blog.csdn.net/mishifangxiangdefeng/article/details/7566575 1.vfsmount.安装点的dentry.设备的de ...
- Dubbo动态负载均衡（socket环境实现）
消费者 去注册中心获取信息 然后缓存到本地 如果有生产者某个服务宕机了 会通过通知的方式告知 (订阅的方式) 微服务rpc远程调用框架中,服务的负载均衡都是采用本地负载均衡的,Spring Clou ...
- leetcode 110 Balanced Binary Tree(DFS)
Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...
- 每天一个Linux命令（2）：ls命令
版权声明 更新:2017-04-26博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍 本文介绍了Linux下命令ls. 2 开 ...
- 洛谷P2024食物链——并查集补集的灵活运用
题目:https://www.luogu.org/problemnew/show/P2024 自己在做本题时最大的障碍就是:不会在一个集合的father改变时把相应的补集也跟着改变. 借鉴题解后,才明 ...