原生js实现全屏滚动–fullPage

jiezi

6 年前

原生 js 实现全屏滚动
fullPage.js
function fullPage() {
const fullPage = document.getElementsByClassName(“full_page”)[0];
const fullPageItems = fullPage.getElementsByClassName(“full_page_item”);
const sliderTab = document.getElementsByClassName(“slider_tab”)[0];
const sliderTabItems = document.getElementsByTagName(“li”);
const sliderTabDivs = document.getElementsByClassName(“small_tab”);
const sliderTabImgs = sliderTab.getElementsByTagName(“img”);
const nextPage = document.getElementsByClassName(“next_page”)[0];

let pageIndex = 0, pageScroll = true, prevIndex = 0;

document.onmousewheel = mouseWheel;
document.addEventListener(“DOMMouseScroll”, mouseWheel)

// 点击箭头，实现下一页
nextPage.onclick = scrollDown

sliderTabClick()

// 滚轮事件
function mouseWheel(e) {
if(e.wheelDelta) {
if(e.wheelDelta > 0) {
scrollUp()
} else {
scrollDown()
}
} else {
if(e.detail > 0) {
scrollDown()
} else {
scrollUp()
}
}
}

// 上滑
function scrollUp() {
if(pageIndex > 0 && pageScroll) {
prevIndex = pageIndex;
pageIndex –;
srcollToPage(pageIndex, prevIndex)
} else if(pageIndex <= 0) {
pageIndex = 0
}
}

// 下滑
function scrollDown() {
if(pageIndex < fullPageItems.length – 1 && pageScroll) {
prevIndex = pageIndex;
pageIndex ++;
srcollToPage(pageIndex, prevIndex)
} else if(pageIndex >= fullPageItems.length – 1) {
pageIndex = fullPageItems.length – 1
}
}

// 滚动到对应页
function srcollToPage(pageIndex, prevIndex) {
fullPage.style.top = – pageIndex * 100 + “%”;
fullPage.style.transition = “all ease-in” + ((Math.abs(pageIndex – prevIndex) – 1)/2 + 0.3) + “s”;
sliderTabSelect(pageIndex)
pageScroll = false
scrollTimer()
if(pageIndex == sliderTabItems.length -1) {
nextPage.style.opacity = “0”
} else {
nextPage.style.opacity = “1”
}
}

// 定时器解决函数连续执行
function scrollTimer() {
setTimeout(function() {
pageScroll = true
}, 500)
}

// 页面滚动，导航对应变化
function sliderTabSelect(index) {
for(let i = 0; i < sliderTabDivs.length; i ++) {
sliderTabDivs[i].classList.remove(“active”);
sliderTabImgs[i].classList.remove(“select”);
}
sliderTabDivs[index].classList.add(“active”);
sliderTabImgs[index].classList.add(“select”)
}

// 点击导航，页面滚动
function sliderTabClick() {
for(let i = 0; i < sliderTabItems.length; i ++) {
sliderTabItems[i].onclick = function () {
if(i > pageIndex) {
fullPage.style.top = – (i – 1) * 100 + “%”;
} else {
fullPage.style.top = – (i + 1) * 100 + “%”;
}
srcollToPage(i, pageIndex)
pageIndex = i
}
}
}
}

html 部分 –index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<link rel=”stylesheet” href=”../common/reset.css”>
<link rel=”stylesheet” href=”css/index.css”>
<title> 全屏滚动 </title>
</head>
<body>
<div class=”container”>
<div class=”full_page”>
<div class=”full_page_item home”>
第 1 页
</div>
<div class=”full_page_item info”>
第 2 页
</div>
<div class=”full_page_item skill”>
第 3 页
</div>
<div class=”full_page_item project”>
第 4 页
</div>
<div class=”full_page_item contact”>
第 5 页
</div>
</div>
<ul class=”slider_tab”>
<li>
<div class=”small_tab active”>
<img class=”select” src=”img/icons/home.png” alt=”” />
</div>
</li>
<li>
<div class=”small_tab”>
<img src=”img/icons/person.png” alt=”” />
</div>
</li>
<li>
<div class=”small_tab”>
<img src=”img/icons/skill.png” alt=”” />
</div>
</li>
<li>
<div class=”small_tab”>
<img src=”img/icons/project.png” alt=”” />
</div>
</li>
<li>
<div class=”small_tab”>
<img src=”img/icons/pen.png” alt=”” />
</div>
</li>
</ul>
<div class=”next_page”>
<img src=”img/icons/arrow_down.png” alt=” 下三角 ” srcset=””>
</div>
</div>
<script src=”js/fullPage.js”></script>
<script src=”js/index.js”></script>
</body>
</html>
css 部分 –index.css
/* 容器 */
.container {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}

/* 全屏滚动容器 */
.full_page {
width: 100%;
height: 500%;
/* overflow: hidden; */
position: absolute;
top: 0;
left: 0;
}

.full_page_item {
width: 100%;
height: 20%;
position: relative;
}

.home {
background: url(../img/bg.png) #87b0a5;
}

.info {
background: url(../img/bg.png) #109085;
}

.skill {
background: url(../img/bg.png) #a29971;
}

.project {
background: url(../img/bg.png) #788990;
}

.contact {
background: url(../img/bg.png) #999;
}

/* 全屏滚动 tab */
.slider_tab {
position: fixed;
top: 50%;
right: 30px;
margin-top: -150px;
}

.slider_tab li {
width: 50px;
height: 50px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.slider_tab li div {
width: 15px;
height: 15px;
background: #f0f0f0;
border-radius: 50%;
}

.slider_tab li div.active {
width: 50px;
height: 50px;
background: #666;
transition: all .3s;
}

.slider_tab li div img {
width: 60%;
height: 60%;
padding-top: 20%;
padding-left: 20%;
display: none;
}

.slider_tab li div img.select {
display: block;
}

/* 下一页 */
.next_page {
width: 30px;
height: 30px;
position: fixed;
left: 50%;
margin-left: -15px;
cursor: pointer;
animation:jump .8s infinite;
-moz-animation:jump .8s infinite; /* Firefox */
-webkit-animation:jump .8s infinite; /* Safari and Chrome */
-o-animation:jump .8s infinite; /* Opera */
}

.next_page img {
width: 100%;
}

@keyframes jump
{
0% {bottom:70px;}
100% {bottom:55px;}
}

@-moz-keyframes jump /* Firefox */
{
0% {bottom:70px;}
100% {bottom:55px;}
}

@-webkit-keyframes jump /* Safari 和 Chrome */
{
0% {bottom:70px;}
100% {bottom:55px;}
}

@-o-keyframes jump /* Opera */
{
0% {bottom:70px;}
100% {bottom:55px;}
}
js 部分 –index.js
window.onload = function() {
fullPage()
}
图片