hujung hadapan web
tutorial js
Belajar menggunakan jquery iScroll.js bar skrol mudah alih plug-in_jquery
Belajar menggunakan jquery iScroll.js bar skrol mudah alih plug-in_jquery
Apakah pemalam yang paling biasa digunakan dalam kerja harian anda, jQurey? Lazyload? Tetapi ini semua pada bahagian PC, tetapi pemalam yang paling biasa digunakan pada bahagian mudah alih ialah iScroll Apakah sebenarnya iScroll dan bagaimana ia harus digunakan? iScroll ialah pemalam yang sangat berkuasa, dan saya hanya mempunyai pemahaman yang cetek mengenainya. Di sini kami akan memperkenalkannya secara ringkas.
Penjanaan iScroll:
iScroll dicipta sepenuhnya kerana penyemak imbas webkit mudah alih, seperti pada peranti mudah alih iPhone dan Android.
Cara menggunakan iScroll:
Prinsip iScroll ialah terdapat limpahan tersembunyi (overflow:hidden;) DOM di lapisan luar, dan kemudian struktur DOM pertama di kawasan ini akan dijadikan instantiated, dan kandungan yang dibalut boleh ditatal secara menegak atau mendatar, jadi dalam Apabila menggunakan iScroll, elemen tatal hendaklah semudah mungkin, kurangkan bilangan DOM dan kurangkan sarang, kerana lebih kompleks struktur DOM, lebih sukar untuk iScroll dijalankan, yang mungkin menyebabkan beberapa nod untuk dipaparkan secara tidak normal. Oleh itu, struktur DOM yang disyorkan adalah seperti berikut:
<div id="wrapper">//overflow:hidden; <ul> //只有第一个DOM结构（ul）被实例化，这个DOM可以纵向或者横向的滚动， //多出的内容会被wrapper的样式hidden。 <li>1</li> <li>2</li> <li>3</li> </ul> </div>
Nota: Sekali lagi, hanya elemen anak pertama (ul) dalam pembungkus boleh dijadikan instantiat untuk menatal dan penatalan mesti dicapai bersama-sama dengan DOM luar (pembungkus).
Bagaimana jika terdapat berbilang ul dalam pembungkus? Ia sangat mudah. Ingat ayat itu, hanya unsur anak pertama (ul) dalam pembungkus boleh dijadikan instantiated dan ditatal:
<div id="wrapper">//overflow:hidden; <div id="first"> //只有第一个DOM结构(ul)被实例化，这个DOM可以纵向或者横向的滚动， //多出的内容会被wrapper的样式hidden <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </div>
Seperti yang anda lihat, hanya yang pertama akan dibuat seketika. Nota: ID struktur DOM pertama (pertama) tidak perlu ditulis di sini Saya hanya menulis ID untuk memudahkan pengenalan semua orang, tetapi ID paling luar (pembungkus) mesti ditulis kerana ia diperlukan apabila JS diisi dalam ID ini:
var myScroll = new iScroll("wrapper");
Cara iScroll harus disegerakan:
Memandangkan kita bercakap tentang instantiasi, bilakah kita harus membuat instantiat? Dikatakan terdapat banyak kaedah instantiasi, tetapi saya tidak pernah menggunakannya hanya satu:
(1) Muatkan iscroll.js dan uw3c.js halaman semasa di bahagian bawah halaman HTML (uw3c.html) (selepas badan dan sebelum html) untuk memastikan struktur DOM HTML boleh dimuatkan.
(2) Instantiate iScroll sebelum JS memasukkan struktur DOM halaman dan data, iaitu, instantiate pada permulaan JS, kerana JS boleh digunakan untuk memasukkan DOM atau data kemudian. Ini memastikan bahawa iScroll telah digunakan sebelum memasukkan data. .
HTML://struktur HTML
<html > <body> ...code... </body> //插入iscroll.js文件 <script type="text/javascript" src="js/iscroll.js" > </script > //插入本页面JS文件 <script type="text/javascript" src="js/uw3c.js" > </script > </html>
Kandungan fail JS://JS
var myscroll;
function iscroll(data){
//实例化iScroll
myscroll=new iScroll("wrapper");
pageData(data);
}
function pageData(obj){
$("body").html(obj);
myscroll.refresh();//当DOM结构发生变化的时候，需要刷新iScroll
}
iscroll("<div>pagedata</div>");
Parameter dalam iScroll:
Apabila membuat instantiated iScroll, anda boleh memasukkan dua parameter Parameter pertama ialah ID DOM luar yang di instantiated, dan parameter kedua ialah objek kaedah pelaksanaan iScroll:
var myscroll=new iScroll("wrapper",{hScrollbar:false});
或者
var opts = {
vScroll:false,//禁止垂直滚动
snap:true,//执行传送带效果
hScrollbar:false//隐藏水平方向上的滚动条
};
var myscroll = new iScroll("wrapper",opts);
Kandungan parameter kedua adalah seperti berikut. Parameter ini akan mengawal kesan iScroll:
hScroll false 禁止横向滚动 true横向滚动 默认为true vScroll false 禁止垂直滚动 true垂直滚动 默认为true hScrollbar false隐藏水平方向上的滚动条 vScrollbar false 隐藏垂直方向上的滚动条 fadeScrollbar false 指定在无渐隐效果时隐藏滚动条 hideScrollbar 在没有用户交互时隐藏滚动条 默认为true bounce 启用或禁用边界的反弹，默认为true momentum 启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用 lockDirection false取消拖动方向的锁定，true拖动只能在一个方向上（up/down 或者left/right）
Kaedah dalam iScroll:
Sudah tentu, dalam parameter kedua, terdapat juga beberapa kaedah yang boleh dilaksanakan:
(1) kaedah tatalKe(x, y, masa, relatif): Lulus dalam 4 parameter: Jarak tatal paksi-X, jarak tatal paksi-Y, masa kesan dan sama ada ia relatif kepada kedudukan semasa. Jadi sebagai contoh:
//在200毫秒的时间内，Y轴向上滚动100像素； uw3c.scrollTo(0, -100, 200) //在200毫秒的时间内，相对于当前位置，X轴向左滚动100像素； uw3c.scrollTo(-100, 0, 200, true)
Kaedah (2)refresh(): Selepas struktur DOM berubah, iScroll perlu dimuat semula, jika tidak, pemalam tatal akan dibuat secara tidak tepat:
uw3c.refresh();//刷新iScroll
(3)onPosChange, adakah kaedah yang boleh mengembalikan perubahan kedudukan? Anda boleh menyemak sama ada terdapat kaedah onPosChange dalam iScroll yang anda gunakan:
onPosChange:function(x,y){
if(y < -200){
//如果Y周向上滚动200像素，$("#uw3c")就显示，否则就隐藏。
$("#uw3c").show();
}else{
$("#uw3c").hide();
}
}
(4) onScrollEnd: acara dilaksanakan apabila skrol tamat Jika anda ingin mencetuskan acara apabila skrol tamat, kaedah ini akan berguna:
//滚动结束后，执行的方法，滚动后会出现提示框alert("uw3c.com")
onScrollEnd:function(){
alert("uw3c.com");
}
(5) onRefresh: Selepas struktur DOM berubah, iScroll perlu dimuat semula, jika tidak, pemalam tatal akan dibuat secara tidak tepat onRefresh ialah kaedah yang akan dilaksanakan selepas iScroll dimuat semula.
(6) onBeforeScrollStart: Panggilan balik masa sebelum memulakan tatal Lalai adalah untuk menghalang tingkah laku lalai penyemak imbas.
(7) onScrollStart: panggil balik untuk mula menatal.
(8) onBeforeScrollMove: Panggilan balik sebelum kandungan bergerak.
(9) onScrollMove: panggil balik untuk pergerakan kandungan.
(10) onBeforeScrollEnd: panggil balik sebelum tamat penatalan.
(11) onTouchEnd: panggil balik selepas tangan meninggalkan skrin.
(12) onDestroy: panggil balik untuk memusnahkan contoh.
Di atas ialah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang menggunakan pemalam bar skrol mudah alih iScroll.js dengan cekap.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1382
52
Penjelasan terperinci kaedah rujukan jQuery: Panduan permulaan cepat
Feb 27, 2024 pm 06:45 PM
Penjelasan terperinci kaedah rujukan jQuery: Panduan Mula Pantas jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas dalam pembangunan tapak web Ia memudahkan pengaturcaraan JavaScript dan menyediakan pemaju dengan fungsi dan ciri yang kaya. Artikel ini akan memperkenalkan kaedah rujukan jQuery secara terperinci dan menyediakan contoh kod khusus untuk membantu pembaca bermula dengan cepat. Memperkenalkan jQuery Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam fail HTML. Ia boleh diperkenalkan melalui pautan CDN atau dimuat turun
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery?
Feb 28, 2024 pm 03:12 PM
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u
Cara menetapkan bar skrol agar sentiasa dipaparkan pada sistem Mac - Cara menetapkan bar skrol agar sentiasa dipaparkan
Mar 18, 2024 pm 06:22 PM
Baru-baru ini, beberapa rakan telah merujuk kepada editor tentang cara menetapkan bar skrol sistem Mac untuk sentiasa dipaparkan . Langkah 1: Dalam menu mula sistem, pilih pilihan [System Preferences]. Langkah 3: Pada halaman Keutamaan Sistem, pilih pilihan [Umum]. Langkah 3: Pada halaman umum, pilih [Sentiasa] untuk memaparkan bar skrol.
Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery?
Feb 28, 2024 am 08:39 AM
Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Dalam pembangunan bahagian hadapan, kita sering menghadapi keperluan untuk memanipulasi atribut ketinggian elemen. Kadangkala, kita mungkin perlu menukar ketinggian unsur secara dinamik, dan kadangkala kita perlu mengalih keluar atribut ketinggian unsur. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengalih keluar atribut ketinggian elemen dan memberikan contoh kod khusus. Sebelum menggunakan jQuery untuk mengendalikan atribut ketinggian, kita perlu terlebih dahulu memahami atribut ketinggian dalam CSS. Atribut ketinggian digunakan untuk menetapkan ketinggian elemen
Petua jQuery: Cepat ubah suai teks semua teg pada halaman
Feb 28, 2024 pm 09:06 PM
Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: <
Gunakan jQuery untuk mengubah suai kandungan teks semua teg
Feb 28, 2024 pm 05:42 PM
Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu?
Feb 29, 2024 am 09:03 AM
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Apabila menggunakan jQuery untuk mengendalikan elemen DOM, anda sering menghadapi situasi di mana anda perlu menentukan sama ada sesuatu elemen mempunyai atribut tertentu. Dalam kes ini, kita boleh melaksanakan fungsi ini dengan mudah dengan bantuan kaedah yang disediakan oleh jQuery. Berikut akan memperkenalkan dua kaedah yang biasa digunakan untuk menentukan sama ada elemen jQuery mempunyai atribut khusus, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan kaedah attr() dan operator jenis // untuk menentukan sama ada elemen mempunyai atribut tertentu
Fahami peranan dan senario aplikasi eq dalam jQuery
Feb 28, 2024 pm 01:15 PM
jQuery ialah perpustakaan JavaScript popular yang digunakan secara meluas untuk mengendalikan manipulasi DOM dan pengendalian acara dalam halaman web. Dalam jQuery, kaedah eq() digunakan untuk memilih elemen pada kedudukan indeks tertentu Senario penggunaan dan aplikasi khusus adalah seperti berikut. Dalam jQuery, kaedah eq() memilih elemen pada kedudukan indeks yang ditentukan. Kedudukan indeks mula dikira dari 0, iaitu indeks elemen pertama ialah 0, indeks elemen kedua ialah 1, dan seterusnya. Sintaks kaedah eq() adalah seperti berikut: $("s
