Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to achieve floor effect with JavaScript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

* {margin: 0; padding: 0;} html, body {width: 100%; height: 100%;} ul {width: 100%; height: 100%;} ul > li {list-style: none Width: 100%; height: 100%; font-size: 100px; text-align: center;} ol {position: fixed; left: 10px; top: 50%; transform: translateY (- 50%) } ol > li {list-style: none; width: 100px; line-height: 40px; text-align: center; border: 1px solid # 000;} .selected {background: skyblue } I am the first layer, I am the second layer, I am the third layer, I am the fourth layer, I am the fifth layer, the first layer, the second layer, the third layer, the fourth layer, the fifth layer.

Js:

/ / 1. Initialization floor color let oPages = document.querySelectorAll ("ul > li"); let colorArr = ['green',' blue', 'purple',' red', 'yellow']; for (let I = 0; I)

Li "); let currentItem = oItems [0]; / / get the height of the visual area let screenHeight = getScreen (). Height; let timerId = null; for (let I = 0; I < oItems.length; iTunes +) {let item = oItems [I]; item.onclick = function () {currentItem.className =" This.className = "selected"; currentItem = this; / / achieve scrolling / / window.scrollTo (0, I * screenHeight); / / Note: Web page scrolling is achieved through documentElement.scrollTop, and the unit / / document.documentElement.scrollTop = I * screenHeight + "px" cannot be added when setting the value. / / document.documentElement.scrollTop = I * screenHeight; clearInterval (timerId); timerId = setInterval (function () {let begin = document.documentElement.scrollTop; let target = I * screenHeight; let step = (target-begin) * 0.2; begin + = step If (Math.abs (Math.floor (step)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.