tab

Posted on

切换

利用滚动条原理可以做到切换效果，举一栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.wrap{
	width: 300px;
	height: 300px;
	border: 5px solid darkcyan;
	overflow: hidden;
}
.inner{
	width: 400%;
	height: 100%;
	overflow: hidden;
}
.inner div{
	width: 25%;
	height: 100%;
	text-align: center;
	line-height: 300px;
	font-size: 50px;
	background: darkkhaki;
	float: left;
	
}
1
2
3
4
5
6
7
8
9
10
11
12
<input type="button" id="" value="1" />
<input type="button" id="" value="2" />
<input type="button" id="" value="3" />
<input type="button" id="" value="4" />
<div class="wrap">
	<div class="inner">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
</div>
1
2
3
4
5
6
7
8
var btn = document.querySelectorAll('input');
var wrap = document.querySelector('.wrap');
for (var i = 0; i< btn.length; i++) {
	btn[i].index = i;
	btn[i].onclick = function (){
		wrap.scrollLeft = this.index*(wrap.offsetWidth-10);
	}
}