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

This article introduces javascript how to achieve full-screen page scrolling effect, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Today I want to share the technical problem: full-screen page scrolling.

The implemented code is simple, but finding the problems depends on long experience, reading experience, and the rich imagination of programmers.

Let's take a look at the last two effects, as well as what console.log prints out:

1. Click the effect of page 2, and the printed result:

After clicking, a string of values Math.ceil (rollData.num) is printed in the pagelist [this.index] .rollCount timer; five seconds later another counter is automatically executed to clear the pagelist [this.index] .rollCount timer.

two。 Click on page 2 again, and the printed result:

After clicking, it will first judge whether the pagelist [this.index] .rollCount timer exists, then clear it; if it has reached the corresponding page, it will print out not to execute, and return

For details, please see the following example, the specific situation has been explained in detail.

Full screen page flip effect: * {padding: 0; margin: 0;} html, body {width: 100%; height: 100%; color: # fff;} ul {list-style: none} # nav {position: fixed Top: 50px; left: 50px;} # nav li {width: 80px; height: 50px; text-align: center; line-height: 50px; border: 2px solid # fff; cursor: pointer } # nav li:nth-child (1) {background: # f60;} # nav li:nth-child (2) {background: # 63c;} # nav li:nth-child (3) {background: # 3c6 } # nav li:nth-child (4) {background: # f9c;} # page {width: 100%; height: 100%;} # page li {width: 100%; height: 100% } Page 1, page 2, page 3, page 4 function rollingPage () {var pageul = document.getElementById ("page"); var pagelist = pageul.children; var navul = document.getElementById ("nav"); var navlist = navul.children; for (I = 0; I < navlist.length Get all styles getComputedStyle var bgcolor = getComputedStyle (navlist [I], ") .backgroundColor;// alert (bgcolor); pagelist [I] .style.background = bgcolor; / / define an index object for the current element, and save the subscript navlist [I] .index = I of the current element. / / declare variables var rollData = {num: 0, target: 0} with object; navList [I] .onclick = function () {/ / the distance from the top of the entire page to the button clicked rollData.target = pagelist [this.index] .offsetTop / / determine whether the clicked is current, and if so, do not continue to execute var h = window.innerHeight | | document.documentElement.clientHeight | | document.body.clientHeight; var x = this.index / / determine whether there is an element attribute timer if (pagelist [this.index] .rollCount) {console.log ("exist") on the page corresponding to the currently clicked button; clearInterval (pagelist [this.index] .rollCount) / * prevent continuous clicks from causing direct return to prevent the page from being loaded, so add judgment to contain it. * in this way, even if the page is not fully reached, even after the above is cleared, * will continue to execute the counter pagelist [this.index] .rollCount * * / / * but find that things will not be perfect after all and need to be constantly improved. * at the moment of chatting with my friends, I clicked the corresponding button on the current page again, * only to find that the following return was not executed. * look again at the Math.ceil (rollData.num) printed in the counter with a value of 1. * therefore, Math.ceil (rollData.num) + 1 = = h * x | | * Math.ceil (rollData.num)-1 = = h * x * * is also added. * after window.scrollTo (0, Math.ceil (rollData.num) + 1) * and minus one and no alkali, the preserved value is Math.ceil (rollData.num) without alkali. * * / if (Math.ceil (rollData.num) + 1 = = h * x | | Math.ceil (rollData.num)-1 = = h * x | | Math.ceil (rollData.num) = = h * x) {console.log ("do not execute") / / if it exists and the scroll bar scrolls to a value equal to that of the current page, the counter is not executed down. Return }} / / timer scrolls pagelist [this.index] .rollCount = setInterval (function () {/ / Math.ceil () rounding rollData.num = rollData.num + to the greater than direction (rollData.target-rollData.num) / 10 Console.log (Math.ceil (rollData.num)) / / 1. Bring the scroll bar to the position with html, window.scrollTo () / / 2. It is judged that the difference between the absolute value of the rollData.num attribute before and after the Math.ceil value is 1 / / the reason why the above 2 operation is carried out Because when printing Math.ceil (rollData.num) values, it is found that sometimes there is a difference of 1 if (Math.ceil (rollData.num) + 1 = h * x) {window.scrollTo (0, Math.ceil (rollData.num) + 1). } else if (Math.ceil (rollData.num)-1 = = h * x) {window.scrollTo (0, Math.ceil (rollData.num)-1);} else {window.scrollTo (0, Math.ceil (rollData.num));}}, 30) / * if the condition is met after 5 seconds, the pagelist [x] .rollCount counter can be cleared * stop the above counter from running all the time * * / setTimeout (function () {/ / after five seconds, if Math.ceil (rollData.num) and the difference before and after 1 meets the condition / / clear the above timer if (Math.ceil (rollData.num) + 1 = = h * x | | Math.ceil (rollData.num)-1 = = h * x | | Math.ceil (rollData.num) = = h * x) { Console.log ("Auto clear" + x) ClearInterval (pagelist.rollCount);}}, 5000);} addLoadEvent (rollingPage); function addLoadEvent (func) {var oldonload = _ window.onload; if (typeof _ window.onload! = 'function') {_ window.onload = func } else {_ window.onload = function () {oldonload (); func ();} about how to achieve full-screen page scrolling in javascript, so much for sharing here. I hope the above content can help you and learn more. If you think the article is good, you can share it for more people to see.

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.