html手机页面选项卡,移动端网页纯原生js选项卡tab切换
*{ margin: 0; padding: 0}
ul,li{ list-style: none}
.tabClick{ background: #f3f3f3; overflow: hidden}
.tabClick li{ height:40px; line-height: 40px; width: 25%; float: left; text-align: center}
.tabClick li.active{ color: #099; transition: 0.1s; font-weight: bold}
.tabCon{ overflow: hidden}
.tabBox{ position: relative}
.tabList{word-break: break-all; width:100%;float:left; line-height:100px; text-align:center; color:#D3D3D3; font-size:36px; font-family: "Arial Black"}
.lineBorder{ height: 2px; overflow: hidden; border-bottom:1px solid #099; background: #f3f3f3}
.lineDiv{ background: #099; height: 2px; width: 25%;}
- Tab1
- Tab2
- Tab3
- Tab4
1
2
3
4
window.onload = function (){
var windowWidth = document.body.clientWidth; //window 宽度;
var wrap = document.getElementById('wrap');
var tabClick = wrap.querySelectorAll('.tabClick')[0];
var tabLi = tabClick.getElementsByTagName('li');
var tabBox = wrap.querySelectorAll('.tabBox')[0];
var tabList = tabBox.querySelectorAll('.tabList');
var lineBorder = wrap.querySelectorAll('.lineBorder')[0];
var lineDiv = lineBorder.querySelectorAll('.lineDiv')[0];
var tar = 0;
var endX = 0;
var dist = 0;
tabBox.style.overflow='hidden';
tabBox.style.position='relative';
tabBox.style.width=windowWidth*tabList.length+"px";
for(var i = 0 ;i
tabList[i].style.width=windowWidth+"px";
tabList[i].style.float='left';
tabList[i].style.float='left';
tabList[i].style.padding='0';
tabList[i].style.margin='0';
tabList[i].style.verticalAlign='top';
tabList[i].style.display='table-cell';
}
for(var i = 0 ;i
tabLi[i].start = i;
tabLi[i].onclick = function(){
var star = this.start;
for(var i = 0 ;i
tabLi[i].className='';
};
tabLi[star].className='active';
init.lineAnme(lineDiv,windowWidth/tabLi.length*star)
init.translate(tabBox,windowWidth,star);
endX= -star*windowWidth;
}
}
function OnTab(star){
if(star<0){
star=0;
}else if(star>=tabLi.length){
star=tabLi.length-1
}
for(var i = 0 ;i
tabLi[i].className='';
};
tabLi[star].className='active';
init.translate(tabBox,windowWidth,star);
endX= -star*windowWidth;
};
tabBox.addEventListener('touchstart',chstart,false);
tabBox.addEventListener('touchmove',chmove,false);
tabBox.addEventListener('touchend',chend,false);
//按下
function chstart(ev){
ev.preventDefault;
var touch = ev.touches[0];
tar=touch.pageX;
tabBox.style.webkitTransition='all 0s ease-in-out';
tabBox.style.transition='all 0s ease-in-out';
};
//滑动
function chmove(ev){
var stars = wrap.querySelector('.active').start;
ev.preventDefault;
var touch = ev.touches[0];
var distance = touch.pageX-tar;
dist = distance;
init.touchs(tabBox,windowWidth,tar,distance,endX);
init.lineAnme(lineDiv,-dist/tabLi.length-endX/4);
};
//离开
function chend(ev){
var str= tabBox.style.transform;
var strs = JSON.stringify(str.split(",",1));
endX = Number(strs.substr(14,strs.length-18));
if(endX>0){
init.back(tabBox,windowWidth,tar,0,0,0.3);
endX=0
}else if(endX
endX=-windowWidth*tabList.length+windowWidth
init.back(tabBox,windowWidth,tar,0,endX,0.3);
}else if(dist
OnTab(tabClick.querySelector('.active').start+1);
init.back(tabBox,windowWidth,tar,0,endX,0.3);
}else if(dist>windowWidth/3){
OnTab(tabClick.querySelector('.active').start-1);
}else{
OnTab(tabClick.querySelector('.active').start);
}
var stars = wrap.querySelector('.active').start;
init.lineAnme(lineDiv,stars*windowWidth/4);
};
};
var init={
translate:function(obj,windowWidth,star){
obj.style.webkitTransform='translate3d('+-star*windowWidth+'px,0,0)';
obj.style.transform='translate3d('+-star*windowWidth+',0,0)px';
obj.style.webkitTransition='all 0.3s ease-in-out';
obj.style.transition='all 0.3s ease-in-out';
},
touchs:function(obj,windowWidth,tar,distance,endX){
obj.style.webkitTransform='translate3d('+(distance+endX)+'px,0,0)';
obj.style.transform='translate3d('+(distance+endX)+',0,0)px';
},
lineAnme:function(obj,stance){
obj.style.webkitTransform='translate3d('+stance+'px,0,0)';
obj.style.transform='translate3d('+stance+'px,0,0)';
obj.style.webkitTransition='all 0.1s ease-in-out';
obj.style.transition='all 0.1s ease-in-out';
},
back:function(obj,windowWidth,tar,distance,endX,time){
obj.style.webkitTransform='translate3d('+(distance+endX)+'px,0,0)';
obj.style.transform='translate3d('+(distance+endX)+',0,0)px';
obj.style.webkitTransition='all '+time+'s ease-in-out';
obj.style.transition='all '+time+'s ease-in-out';
},
}
html手机页面选项卡,移动端网页纯原生js选项卡tab切换相关推荐
- html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比 ...
- react 原生html 插件,纯原生JS的瀑布流插件Macy.js,前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
- 扫雷html5简单初级,纯原生JS用面向对象class方法实现简易扫雷小游戏
Demo介绍 纯原生js 实现 且用ES6语法class写的扫雷小游戏:布局为10*10的网格,随机生成10-20个雷. 左键点击扫雷.右键标记该地方有雷.该demo下载下来复制到html文件中直接可 ...
- 手机端移动端的前端原生js裁剪图片上传
手机端移动端的前端原生js裁剪图片上传 选择头像时裁剪上传,确保图片是个正方形,不会出现压扁拉伸的现象 效果图 原理很简单,其实就是用canvas截图出来而已,只是要对比例做一下处理. <!-- ...
- 纯原生JS用面向对象class方法实现简易扫雷小游戏
Demo介绍 纯原生js 实现 且用ES6语法class写的扫雷小游戏:布局为10*10的网格,随机生成10-20个雷. 左键点击扫雷.右键标记该地方有雷.该demo下载下来复制到html文件中直接可 ...
- html移动端选择器插件,原生js实现移动端选择器插件
原生js实现移动端选择器插件 前言 插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star ? 预览 准备 首先在页面中 ...
- qt tablewidget 实现tab来回切换_原生JS实现TAB选项卡切换效果
插件化写法: HTML: tab1 tab2 tab3 tab4 tab5 页面1 页面2 页面3 页面4 页面5 css: .wrap{height:500px;width:80%;margin:5 ...
- java实现选项卡定时轮播_原生js面向对象编程-选项卡(自动轮播)
原生js面向对象编程-选项卡(自动轮播) }#div1 input{color:#fff;width:100px;height:40px;background:darkseagreen;border: ...
- html手机端页面meta,移动端网页meta设置和响应式
苏宁易购WAP的meta分析 响应式 meta设置 媒体查询时读的width为viewport的宽度.viewport宽度为手机分辨率.比如note2 1280*720.需要重置为设备 640*360 ...
最新文章
- java.sql.SQLException: java.lang.StackOverflowError
- java基础值java 运行参数,及jvm调优
- python画直方图成绩分析-Python数据分析:直方图及子图的绘制
- 仿苹果手机闹钟_原来iPhone自带的闹钟这么好用,以前没发现,现在一直在用
- 捕获计算机屏幕++方法,如何在Windows 10计算机上录制屏幕以及如何捕获计算机的音频...
- pyecharts学习(part4)--pyecharts饼图
- Java设计流程执行器_Java进阶面试精选系列:SpringMVC+SpringBoot+Hibernate+Mybatis+设计模式...
- 数据库重建索引 计划任务
- TokenInsight:反映区块链行业整体表现的 TI 指数较昨日同期下跌1.03%
- 问题集录--新手入门深度学习,选择TensorFlow 好吗?
- Python编曲实践(十):用Ableton Live 10手工扒的Grunge摇滚数据集,涵盖Grunge时期四大代表乐队的经典专辑
- hbase 二级索引方案
- 解密阿里云效女程序员辰颜、异新代码诗!
- java.lang.Byte cannot be cast to java.lang.Integer,sql 到 java 类型转换遇到的问题
- linux怎么查看文件内容
- 江湖笑(2006[神雕侠侣]片尾主题曲)铃声 江湖笑(2006[神雕侠侣...
- pandas 数据怎样实现行间计算
- HR 开发技术(abap 转载)
- c语言数据结构-遍历
- java+flutter实现微信登录
热门文章
- 神经网络的传播原理——看不懂你来打我
- [Python] 通过复制、识图实现的剪切板自动翻译
- 将linux目录中的特定文件推送到手机_linux复制指定目录下的全部文件到另一个目录中,linux cp 文件夹...
- 华南农业大学创新创业
- 导出报错cannot be resolved to absolute file path because it does not reside in the file system
- 计算机存储器由半导体,半导体集成存储器
- 引用和指针的区别都有什么_为什么要有指针和引用类型?
- SaaS应用选型,必须考虑的10个安全问题
- 狂雨cms,狂雨cms程序,狂雨cms快速建站
- 源码学习笔记-网易邮箱登陆页面