移动端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 ...
随机推荐
- 我的Android进阶之旅------>报 error: Apostrophe not preceded by \ 的错误解决办法
今天对项目进行国际化翻译的时候控制台出现了以下的错误: res/values/strings.xml:100: error: Apostrophe not preceded by \ (in Sorr ...
- PHP Framework
PHP Framework is built for PHP developers who need elegant toolkit to create full-featured web appli ...
- TensorFlow运行时出现warning如何设置禁止打印方法
有时候运行TensorFlow时比较烦人,经常报一些warning或者版本更新了之类的一些警告,如下: 那么如何去掉或者说不显示这些东西呢,可以通过简单添加几行代码搞定,来看一下. 这样就不会报警告了 ...
- PAT 天梯赛 L2-022. 重排链表 【数据结构】
题目链接 https://www.patest.cn/contests/gplt/L2-022 思路 先用结构体 把每个结点信息保存下来 然后深搜一下 遍历一下整个链表 然后就重新排一下 但是要注意一 ...
- 20145239杜文超 《Java程序设计》第2周学习总结
20145239 <Java程序设计>第2周学习总结 教材学习内容总结 第三章主要介绍了Java语言的基础语法. 要求我们认识类型与变量,学习运算符的基本使用以及了解类型转换.运用基本流程 ...
- Linux下新建oracle用户
su - oraclesqlplus / as sysdba the procedure of dropping user are as follow: select sid,serial# from ...
- CSS3咖啡制作全过程动画
CSS3咖啡制作全过程动画是一款利用纯CSS3实现的咖啡制作全过程动画特效,从把咖啡豆导入杯子,到把咖啡煮好,整个动画还比较流畅. 源码:http://www.huiyi8.com/sc/8788.h ...
- linux应用之jdk环境的安装（centos）
一.yum安装 1.执行:yum search jdk 已加载插件:fastestmirror, securityLoading mirror speeds from cached hostfile ...
- 引用 qsort与sort的比较
引用 linpder 的 qsort与sort的比较 在C/C++标准库中提供了快速排序的函数qsort():在STL中也提供了sort()排序函数,那么这两个函数哪个快呢?之前与代码-> ...
- Apache-SimpleEmail 简单应用
比JavaMail使用方法要直接,jar包只需要在JavaMail的基础上添加commons-email-1.4.jar即可. 代码: // QQ邮箱发送邮件 SimpleEmail simpleEm ...