Home >Web Front-end >JS Tutorial >javascript Slip.js implements full-screen sliding mobile webpage_javascript skills
With Slip.js, you only need to write HTML and CSS. If the logic is simple, it can be done with one line of JS code, which greatly improves the efficiency of development. Not to brag, I wrote the demo above in less than half an hour.
How to do it specifically? For example, there is a requirement:
We have 4 pages, each page has a picture, and every time your finger slides, the entire screen switches.
Look at the HTML first:
<!doctype html> ... <script type="text/javascript" src="slip.js"></script> <body> ... <div id="container"> <div class="page page-1"><img src="img/1.png"></div> <div class="page page-2"><img src="img/2.png"></div> <div class="page page-3"><img src="img/3.png"></div> <div class="page page-4"><img src="img/4.png"></div> </div> </body>
Last look at JS:
var container = document.getElementById('container'); var pages = document.querySelectorAll('.page'); var slip = Slip(container, 'y').webapp(pages);
Commentary:
It’s all done with one line of code:
Slip(document.getElementById('container'), 'y').webapp();
You can find that the above line of code does not define pages:
When the webapp method does not pass parameters, Slip will obtain the direct child elements (son elements) of the container as pages.
At this point, a full-screen sliding web page is completed, which is unimaginably simple and fast. It takes me half an hour, but you should be able to do it in 10 minutes.
Of course: Slip.js has many more powerful functions. For example, you can define what to do when the page slides. PM saw that you completed it so quickly, so I added very interesting requirements for you:
When the page slides to the last page, refresh it. . .
You only need to add a few lines of code to get it done:
Slip(document.getElementById('container'), 'y').webapp().end(function() { if (this.page === 3) location.reload(); });
Look, isn’t it very simple? Is it completed before I even have time to complain about this requirement? Isn’t it an unprecedented pleasure?
The above is the entire content of this article. I hope you all like it. This article is just the beginning. There will be more comprehensive and exciting articles waiting for you in the future. I hope you don’t miss it.