<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.fullpage {
position: absolute;
top: 0;
left: 0;
}
section {
width: 100vw;
height: 100vh;
font-size: 80px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.section_1 {
background-color: aqua;
}
.section_2 {
background-color: skyblue;
}
.section_3 {
background-color: darksalmon;
}
.section_4 {
background-color: red;
}
.section_5 {
background-color: forestgreen;
}
ul {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 18px;
/* height: 100px; */
border-radius: 5px;
background-color: rgba(255, 255, 255, .7);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
ul li {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: skyblue;
}
ul .active {
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="fullpage">
<section class="section_1">
有在好好生活
</section>
<section class="section_2">
过程用心 结果随缘
</section>
<section class="section_3">
家人闲坐 灯火可亲
</section>
<section class="section_4">
我将归来 万马千军
</section>
<section class="section_5">
放弃一定不难 但坚持很酷
</section>
</div>
<!-- 小圆点 -->
<ul>
<!-- <li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li> -->
</ul>
</div>
<script src="../tools.js"></script>
<script>
// 获取元素
const wrap = document.querySelector('.fullpage');
const sections = document.querySelectorAll('section');
const ul = document.querySelector('ul')
// 动态设置小圆点
for (let i = 0; i < sections.length; i++) {
var li = document.createElement('li')
if (i == 0) {
li.classList.add('active');
}
ul.appendChild(li)
}
// 动态设置小圆点父盒子的宽 ul
ul.style.height = li.offsetHeight * ul.children.length * 2 + 'px'
// 给wrap设置一个动态高度
wrap.style.height = sections.length * wrap.firstElementChild.offsetHeight + 'px'
// 获取滚动条的高度 让鼠标滚动一视口的高
// 视口高的索引
var index = 0
// 获取浏览器的视口高
var wh = window.innerHeight
// 为了防止动画未完成 点击过快造成的抖动 而加锁
var flag = true
// 添加一个鼠标滚轮事件
window.onmousewheel = function (e) {
if (!flag) {
return
}
flag = false
// var e = window.event || e
if (e.deltaY > 0) {
index++
// deltaY 大于0是 向下
if (index > sections.length - 1) {
index = sections.length - 1
}
move(wrap, {
top: -index * wh
}, function () {
// 动画完成后在执行小圆点跟随
// 让小圆点随着屏的变动而变动
for (let i = 0; i < ul.children.length; i++) {
ul.children[i].classList.remove('active');
}
ul.children[index].classList.add('active')
flag = true
})
} else {
index--;
if (index < 0) {
index = 0
}
move(wrap, {
top: -index * wh
}, function () {
// 动画完成后在执行小圆点跟随
// 让小圆点随着屏的变动而变动
for (let i = 0; i < ul.children.length; i++) {
ul.children[i].classList.remove('active');
}
ul.children[index].classList.add('active')
flag = true
})
}
}
// 点击小圆点
for (let i = 0; i < ul.children.length; i++) {
ul.children.onclick = function () {
if (!flag) {
return
}
flag = false
index = i;
move(wrap, {
top: -index * wh
}, function () {
// 动画完成后在执行小圆点跟随
// 让小圆点随着屏的变动而变动
for (let i = 0; i < ul.children.length; i++) {
ul.children[i].classList.remove('active');
}
ul.children[index].classList.add('active')
flag = true
})
}
}
/*
封装获取样式的函数
@ ele 元素
@ attr 属性
*/
function getStyle(ele,attr) {
if (window.getComputedStyle) {
return parseInt(window.getComputedStyle(ele)[attr])
} else {
// 因为attr是个变量不是一个字符串 所以不能直接 .键 要用[]
return parseInt(ele.currentStyle[attr])
}
}
/*
运动封装方法
@ele 运动的元素
@aObj 对象 key是运动的属性 value是运动的目标值（终点）
@cb是一个回调函数
*/
function move(ele, aObj, cb) {
var obj = {}
for (let attr in aObj) {
obj[attr] = setInterval(() => {
// 要获取动态的当前位置
let oldStyle = getStyle(ele, attr)
let step = (aObj[attr] - oldStyle) / 10;
// 判断step为正负？
step > 0 ? step = Math.ceil(step) : step = Math.floor(step)
// 判断是否走到目标位置
if (oldStyle === aObj[attr]) {
clearInterval(obj[attr])
delete obj[attr];
if (isEmptyObj(obj)) {
// 对象为空 动画结束
cb() // 使用则个函数
}
} else {
// 没走到目标位置
ele.style[attr] = oldStyle + step + 'px'
}
}, 30);
}
}
// 3.通过ES6新增的一个Object.keys()方法
function isEmptyObj(obj) {
if (Object.keys(obj).length == 0) {
return true;
} else {
return false;
}
}
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
