Rumah > Artikel > hujung hadapan web > javascript Slip.js melaksanakan kemahiran javascript halaman web mudah alih gelongsor skrin penuh

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

WBOYasal: 2016-05-16 15:29:501414semak imbas

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:

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();
});

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 .

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Soalan temu duga penutupan JS yang boleh anda lakukan salah dengan kemahiran accident_javascriptArtikel seterusnya：Soalan temu duga penutupan JS yang boleh anda lakukan salah dengan kemahiran accident_javascript

Artikel berkaitan

Lihat lagi