HTML5滾屏代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5滾屏頁面</title>
<style>
body{
margin: 0;
padding: 0;
overflow: hidden; /* 隱藏滾動條 */
}
#wrap{
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1; /* 將 #wrap 放到最底層 */
}
.page{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
color: white;
transition: transform 1s; /* 滾動動畫效果 */
}
#page1{
background-color: #4c4c4c;
}
#page2{
background-color: #005bab;
}
#page3{
background-color: #ff6b6b;
}
.next-page{
position: absolute;
bottom: 20px;
right: 20px;
font-size: 30px;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap">
<div id="page1" class="page">Page 1</div>
<div id="page2" class="page">Page 2</div>
<div id="page3" class="page">Page 3</div>
</div>
<div class="next-page">Next Page></div>
<script>
var wrap = document.getElementById('wrap');
var pages = document.getElementsByClassName('page');
var next = document.getElementsByClassName('next-page')[0];
var index = 0;
var length = pages.length;
next.onclick = function(){
index++;
if(index >= length){
index = 0;
}
wrap.style.transform = 'translateY(-' + index*100 + '%)';
}
</script>
</body>
</html>代碼解析：
1. CSS設(shè)置body元素的overflow屬性為hidden可以隱藏滾動條。 2. 將滾屏頁面包裹在一個id為wrap的div元素中，其寬度和高度均為100%。 3. 設(shè)置每個滾屏頁面元素的寬度和高度均為100%，利用flex布局讓頁面內(nèi)容垂直水平居中。 4. 通過設(shè)置頁面滾動動畫效果，增加頁面交互體驗。 5. 通過JavaScript控制頁面滾動，將#wrap元素的translateY屬性設(shè)置為負值即可滾動至下一屏。
上一篇html5灰度漸變代碼
下一篇mysql5.7改進