Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
html,body {
	width:100%;
	height:100%;
	overflow:hidden;
}
.big-box {
	width:100%;
	height:500%;
	text-align:center;
	position:absolute;
}
.big-box .item {
	height:20%;
}
.big-box .item1 {
	background-color:red;
}
.big-box .item2 {
	background-color:blue;
}
.big-box .item3 {
	background-color:purple;
}
.big-box .item4 {
	background-color:gold;
}
.big-box .item5 {
	background-color:pink;
}
.controls {
	list-style:none;
	position:absolute;
	top:20%;
	right:20px;
}
.controls li {
	width:50px;
	height:50px;
	font:bold 22px/50px "宋体";
	text-align:center;
	background-color:#000;
	color:#fff;
	cursor:pointer;
}
.controls li+li {
	margin-top:5px;
}
.controls li.active {
	background-color:#fff;
	color:red;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

页面滚动效果

0