可滑动的tab栏

闲来无事,看到有些网站做了一个移动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>

发布了34 篇原创文章 · 获赞 1 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览