移动端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 ...
随机推荐
- 我的Java开发学习之旅------>工具类：Java获取字符串和文件进行MD5值
ps:这几天本人用百度云盘秒传了几部大片到云盘上,几个G的文件瞬秒竟然显示"上传成功"!这真让我目瞪口呆,要是这样的话,那得多快的网速,这绝对是不可能的,也许这仅是个假象.百度了一 ...
- centos 7 官网安装 PostgreSQL
https://www.postgresql.org/download/linux/redhat/
- CALL FUNCTION 'BAPI_GOODSMVT_CREATE'-(物料凭证创建)
*&---------------------------------------------------------------------* *& Report YTST_RAI ...
- 提高iOS开发效率的第三方框架等--不断更新中。。。
1. Mantle Mantle 让我们能简化 Cocoa 和 Cocoa Touch 应用的 model 层.简单点说,程序中经常要进行网络请求,请求到得一般是 json 字符串,我们一般会建一个 ...
- jqueryeasyUI dialog 弹出窗口超出浏览器，导致不能关闭的bug解决方案
jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案 2014年8月30日 3233次浏览 相信很多前端朋友都用过jqueryeasyUI,jqueryeasyUI ...
- LightOJ - 1395 A Dangerous Maze (II) —— 期望
题目链接:https://vjudge.net/problem/LightOJ-1395 1395 - A Dangerous Maze (II) PDF (English) Statistic ...
- Listen 82
Doc Calls Deconditioning a Condition Doctors know a lot about prescribing medications. "Take tw ...
- CSDN不登陆看博文
做前端的朋友说,手动改太Low,给了段JS代码: javascript: void((function() {var divElement = document.getElementById('art ...
- 1080 Graduate Admission (30)（30 分）
It is said that in 2013, there were about 100 graduate schools ready to proceed over 40,000 applicat ...
- WebSocket的C++服务器端实现
由于需要在项目中增加Websocket协议,与客户端进行通信,不想使用开源的库,比如WebSocketPP,就自己根据WebSocket协议实现一套函数,完全使用C++实现. 代码已经实现,放在个人g ...