<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>