javascript Slip.js melaksanakan kemahiran javascript halaman web mudah alih gelongsor skrin penuh-tutorial js-php.cn

javascript Slip.js melaksanakan kemahiran javascript halaman web mudah alih gelongsor skrin penuh

WBOY

Lepaskan： 2016-05-16 15:29:50

asal

1412 orang telah melayarinya

Dengan Slip.js, anda hanya perlu menulis HTML dan CSS Jika logiknya mudah, ia boleh dilakukan dengan satu baris kod JS, yang meningkatkan kecekapan pembangunan. Bukan nak mendabik dada, saya tulis demo di atas dalam masa tak sampai setengah jam.

Bagaimana untuk melakukannya secara khusus? Sebagai contoh, terdapat keperluan:

Kami mempunyai 4 halaman, setiap halaman mempunyai gambar, dan setiap kali jari anda meluncur, seluruh skrin bertukar.

Lihat HTML dahulu:

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

Salin selepas log masuk

Pandangan terakhir pada JS:

var container = document.getElementById('container');
var pages = document.querySelectorAll('.page');
var slip = Slip(container, 'y').webapp(pages);

Salin selepas log masuk

Ulasan:

Slip: Kaedah yang didedahkan kepada seluruh dunia selagi anda memperkenalkan slip.js, anda boleh mendapatkan kaedah yang praktikal dan hebat ini.
bekas: Bekas yang sedang digelongsor mengandungi setiap halaman gelongsor.
'y': Arah gelongsor halaman, anda juga boleh lulus dalam 'x'.
webapp: Cara menetapkan halaman untuk dipaparkan sebagai halaman gelongsor skrin penuh.
halaman: Senarai elemen halaman.

Semuanya dilakukan dengan satu baris kod:

Slip(document.getElementById('container'), 'y').webapp();
Anda boleh mendapati bahawa baris kod di atas tidak mentakrifkan halaman:

Apabila kaedah aplikasi web tidak melepasi parameter, Slip akan memperoleh elemen anak langsung (elemen anak) bekas sebagai halaman.

Pada ketika ini, halaman web gelongsor skrin penuh selesai, yang sangat mudah dan pantas. Saya mengambil masa setengah jam, tetapi anda sepatutnya dapat melakukannya dalam 10 minit.

Sudah tentu: Slip.js mempunyai banyak fungsi yang lebih berkuasa Contohnya, anda boleh menentukan perkara yang perlu dilakukan apabila halaman slaid melihat anda menyelesaikannya dengan begitu cepat, jadi saya menambah keperluan yang sangat menarik untuk anda:

Apabila halaman meluncur ke halaman terakhir, muat semula halaman itu. . .

Anda hanya perlu menambah beberapa baris kod untuk menyelesaikannya:

Slip(document.getElementById('container'), 'y').webapp().end(function() {
 if (this.page === 3) location.reload();
});

Salin selepas log masuk

Lihat, bukankah ia sangat mudah? Adakah ia selesai sebelum saya mempunyai masa untuk mengadu tentang keperluan ini?

Di atas adalah keseluruhan kandungan artikel ini Saya harap anda semua menyukainya .