闲来无事，看到有些网站做了一个移动tab的效果，感觉体验不错，所以自己写了一个半成品，样式是有点丑，别吐槽哦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
padding:0;
margin:0;
}
.tab{
width: 400px;
height:60px;
border:1px solid #ccc;
margin:100px auto;
position: relative;
background:#ccc;
}
ul{
width: 612px;
position: absolute;
left:0;
top: 0;
transition:all 0.2s;
}
ul li{
width: 100px;
height: 60px;
list-style: none;
float: left;
border-bottom: 1px solid red;
border:1px solid red;
}
</style>
</head>
<body>
<div class="tab" id="tab">
<ul id="list">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
<li>tab5</li>
<li>tab6</li>
</ul>
</div>
</body>
<script>
var oTab=document.getElementById('tab');
var list=document.getElementById('list');
var aLi=list.getElementsByTagName('li');
var iBox_W=oTab.offsetWidth;//整个Tab栏的宽度
var iLi_W=aLi[0].offsetWidth;//一个li的宽度
//dis等于一个整个tab的宽度-
var dis=(iBox_W-iLi_W)/2;
var iMax=list.offsetWidth-iBox_W;//限制范围
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onclick=function(){
var iMove=this.index*iLi_W;
list.style.left=-iMove+dis+'px';
var str=parseInt(list.style.left);//保留整数
if(str>=(dis-iLi_W)){//检测离左边距离是否大于等于一个dis减去一个li的宽度，临界值
list.style.left=0;
}
if(-str>=iMax){
list.style.left=-iMax+'px';
}
}
}
</script>
</html>
![实现计算器功能[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)