移动端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开发学习之旅------>Workspace in use or cannot be created, choose a different one.--错误解决办法
今天使用Eclipse时,突然卡死了,然后我强制关闭了Eclipse,再重新打开的时候就报错了,错误如下: Workspace in use or cannot be created, choose ...
- Linux就该这么学--命令集合11（配置系统相关信息）
1.配置主机名称: 查看主机名: hostname 修改主机名: vim /etc/hostname 2.配置网卡信息: 在红帽RHEL6系统中网卡配置文件的前缀为“ifcfg-eth”,第一块即为“ ...
- 剑指Offer：字符串排列【38】
剑指Offer:字符串排列[38] 题目描述 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bc ...
- Java基础教程：面向对象编程[1]
Java基础教程:面向对象编程 内容大纲 Java语言概述 Java语言特点 1.Java为纯面向对象的语言,它能够直接反映现实生活中的对象.总之,Everything is object! 2.平台 ...
- redis下载及安装服务
1 . 要安装Redis,首先要获取安装包. Windows的Redis安装包需要到以下GitHub链接找到. 链接:https://github.com/MSOpenTech/redis 打开网站后 ...
- 批量导入oracle 的sql脚本
以下为脚本样例:execute.sql,在PL/sql的command窗口或sqlplus中执行:@目录/execute.sql (以下“目录”需要替换为实际sql所在目录) --执行前需要在目录下新 ...
- Adding Form Fields to a MS Word Document
Configuring a Word Merge in SmartSimple is a three-step process: Create the MS Word document that wi ...
- python的上下文管理器
直接上代码: f = open('123.txt','w') try: f.write('hello world') except Exception: pass finally: f.close() ...
- listen 55
There are also green card qualifiers for some non-citizens who invest in America, and for refugees.难 ...
- tomcat 6.0 安装及配置
前提:安装并配置好jdk 1.免安装版存放目录:D:\01Install\tomcat