Rumah > Artikel > hujung hadapan web > javascript Slip.js melaksanakan kemahiran javascript halaman web mudah alih gelongsor skrin penuh
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>
Pandangan terakhir pada JS:
var container = document.getElementById('container'); var pages = document.querySelectorAll('.page'); var slip = Slip(container, 'y').webapp(pages);
Ulasan:
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(); });
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 .