Home > Article > Web Front-end > javascript Slip.js implements full-screen sliding mobile webpage_javascript skills

javascript Slip.js implements full-screen sliding mobile webpage_javascript skills

WBOYOriginal: 2016-05-16 15:29:501374browse

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:

Slip: A method exposed to the whole world. As long as you introduce slip.js, you can get this practical and awesome method.
container: The container being slid contains each sliding page.
'y': The direction of page sliding, you can also pass in 'x'.
webapp: How to set the page to display as a full-screen sliding page.
pages: List of page elements.

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS closure interview questions that you can do wrong by accident_javascript skillsNext article：JS closure interview questions that you can do wrong by accident_javascript skills

See more

javascript Slip.js implements full-screen sliding mobile webpage_javascript skills

Related articles