cari

Rumah >hujung hadapan web >tutorial js >Pemalam Scrollify jQuery melaksanakan gelongsor ke nod seterusnya pada page_jquery

Pemalam Scrollify jQuery melaksanakan gelongsor ke nod seterusnya pada page_jquery

WBOY
WBOYasal
2016-05-16 15:51:311396semak imbas

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

Skrol juga menyediakan panggilan kaedah, seperti: 

$.scrollify("move","#name");
Kod di atas boleh menatal terus ke nod #nama.

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：kaedah pelaksanaan kesan imej latar belakang dinamik jQuery_jqueryArtikel seterusnya：kaedah pelaksanaan kesan imej latar belakang dinamik jQuery_jquery

Artikel berkaitan

Lihat lagi