Kadangkala kami perlu mencipta satu halaman untuk memperkenalkan ciri produk, dan satu halaman mempunyai banyak kandungan dan halaman itu sangat panjang Untuk mencari nod ciri produk dengan cepat, kami menggunakan js untuk mendengar pengguna acara roda. Apabila pengguna mencetuskan gelongsor roda atau menggunakan gerak isyarat Apabila anda menyentuh skrin dan gelongsor, anda boleh mencari nod yang sepadan. Pemalam jQuery yang dipanggil Scrollify membantu kami melakukan ini.
Tatal memerlukan jQuery 1.6 dan pemalam pelonggaran animasi penimbal untuk dilaksanakan. Struktur asas HTML adalah seperti berikut:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>scrollify</title>
<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<![endif]-->
<script src="jquery.js"></script>
<script src="jquery.easing.min.js"></script>
<script src="jquery.scrollify.min.js"></script>
<script>
$(function() {
$.scrollify({
section : "section",
});
});
</script>
</head>
<body>
<section></section>
<section></section>
</body>
</html>
Berikut ialah konfigurasi pilihan lalai scrollify:
$.scrollify({
section : "section",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
before:function() {},
after:function() {}
});
Penerangan pilihan:
bahagian: Pemilih bahagian nod.
sectionName: atribut data yang sepadan dengan setiap nod bahagian.
pelonggaran: Tentukan animasi penimbal.
offset: Tentukan offset setiap nod warna.
bar skrol: Sama ada mahu memaparkan bar skrol.
sebelum: fungsi panggil balik, dicetuskan sebelum menatal bermula
selepas: fungsi panggil balik, dicetuskan selepas penatalan selesai
$.scrollify("move","#name");
Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
