Selama pengembangan seluler, kita sering menghadapi acara geser. Seperti yang kita semua tahu, meluncur di ponsel terutama bergantung pada acara sentuh. Baru -baru ini, kami telah menemukan dua halaman yang memiliki efek yang sama dengan overflow: Auto. Secara umum, dapat dicapai melalui pengaturan CSS (meskipun agak jelek), tetapi begitu overflow: elemen otomatis merespons peristiwa sentuh, akan ada banyak ketidaknyamanan. Misalnya, elemen tertentu dalam halaman penuh secara otomatis slide. Kita dapat menggunakan normalscrollements untuk membuat elemen tidak meluncur ke layar berikutnya saat meluncur, tetapi ketika elemen meluncur ke bawah, itu tidak dapat menanggapi acara layar berikutnya. Hal yang sama berlaku untuk meluncur ke atas. Pada saat ini, acara sentuh diperlukan untuk merespons. Untuk kenyamanan enkapsulasi di masa depan, plug-in jQuery hanya dienkapsulasi, dan pada saat yang sama, kami juga meninjau plug-in pengembangan dan acara sentuh jQuery;
Gagasan umum plug-in adalah sebagai berikut: Area dalam kotak adalah elemen induk dengan lebar dan tinggi tetap (set overflow: tersembunyi), dan ketinggian elemen anak lebih besar dari elemen induk. Kami mengubah nilai terjemahan dari elemen anak dengan menanggapi acara sentuh (atas juga dimungkinkan, tetapi efisiensi terjemahan lebih tinggi). Tentu saja, selama periode ini, kita perlu menilai batas nilai terjemahan dari elemen anak, maksimum adalah 0, dan minimum adalah ketinggian elemen elemen anak-orang tua anak
PS: Jika Anda ingin memindahkan elemen anak sesuai jari, Anda perlu menulis program lain setelah melepaskan jari dan kembali ke batas.
Mari Tulis Plugin Langkah Demi Langkah
Langkah pertama adalah membangun ruang lingkup yang aman
; (function ($) {// Masukkan kode}) (jQuery) Jika kita perlu menelepon melalui metode $ ("##"). $ .ExtEnd ({exec: function () {}}) // Ekstensi ini memanggil $ .fn.simuscroll = function (opsi) {var scrollobj = new simuscroll (ini, opsi); return scrollobj.init ();}Mari kita lihat metode simuscroll dalam kode di atas. Ini adalah konstruktor. Itu menerima dua parameter. ELE adalah elemen yang saat ini menerima peristiwa sentuh (umumnya dapat ditetapkan sebagai elemen induk), opsi adalah parameter konfigurasi yang dilewatkan oleh pengguna, seperti mengubah elemen terjemahan, ketinggian elemen elemen induk, ekstra adalah ketinggian yang perlu ditambahkan, fungsi callback yang dieksekusi saat meluncur ke atas atau bawah, dll.
var simuScroll = function(ele,option){this.settings = {target : ele, //Event element changeTarget:'',outerHeight : '800', //Outer Height innerHeight : '500', //InnerHeight extra: '0', //Extra distance swipeUp : null,swipeDown : null,vertical:true};//Extend the default settings through jQuery.extend untuk mendapatkan objek baru this.opt = jQuery.extend ({}, this.settings, opsi); this.initnumber = this.lastnumber = this.result = 0; this.flag = false; // Hitung perbedaan jarak antara elemen anak dan elemen induk untuk menentukan jarak geser maksimum elemen this.diff = parsefloat (this.opt.innerheight) - parsefloat (this.opt.ougheift.opt. this.diff <0? 0: this.diff; this.direction = '';};Saat memperpanjang prototipe jQuery, langkah pertama adalah instantiate konstruktor di atas, dan langkah kedua secara langsung memanggil metode init dari konstruktor. Lihat catatan di bawah ini untuk detailnya.
init: function () {// objek jQuery secara langsung mengikat acara sentuh untuk mendapatkan acara, perlu mendapatkan atribut acara dari objek asli // objek jQuery memperoleh pagex event.originalevent.touches [0] .pagex // dom objek event.touches [0] .pagex var target = this.opt.target.get (0); // Jika ketinggian elemen anak lebih besar dari elemen induk, jalankan acara geser, sebaliknya jalankan fungsi callback this.flag = this.diff> 0? 'Translate': 'exec';/*Jika elemen telah mengatur salah satu dari transformasi, skala, condong, dan berputar dalam transformasi, maka kita akan secara langsung mengatur transformasi: translatey (10px) dan menimpa atribut set awal. Jadi kami tidak hanya dapat memastikan atribut asli dengan mendapatkan nilai matriks elemen, tetapi juga menetapkan nilai apa pun*/var csStext = this.opt.changetarget.css ('-WebKit-Transform'); if (csstext == 'none') {// Elemen belum mengatur atribut transform this.str = this.opt.vertical? 'translatey': 'translatex';} else {this.str = csstext; var reg = /-?/d+/.?/d*/g; // Ekspresi reguler/*Dapatkan nilai matriks yang diperoleh secara langsung oleh masing -masing parameter dalam matriks mirip dengan matriks (1,0,0,1,0,0) dan diperoleh dengan matriks (1,0,0,1,0,0) sehingga kita dapat memodifikasi item ke -5 adalah nilai translatexx dari elemen, dan nilai ke -6. this.str.match (reg); this.matrix = this.opt.vertical? 6: 5; // dapat menentukan nilai yang akan dimodifikasi sebagai translatey atau translatex berdasarkan parameter yang dilewatkan} var _this = this; // Elemen induk mengikat acara sentuh, lulus objek acara dan contextTarget.addeventListener ('touchstart', function (e) {_ this.start (e, _this)}); target.addeventListener ('touch pindahkan ', function (e) {_ this.move (e, _this)}); target.addeventListener (' touchend ', function (e) {_ this.end (e, _this)});}Metode TouchStart relatif sederhana, dan nilai awal jari menyentuh layar direkam sesuai dengan arah yang Anda butuhkan untuk meluncur.
Start: function (e, context) {e.preventDefault (); var touches = e.touches [0]; context.initnumber = context.opt.vertical? Touches.pagey: Touches.pagex;},Metode TouchMove terutama mengubah atribut CSS elemen secara dinamis berdasarkan jarak geser jari, sehingga elemen dapat bergerak dengan jari
Metode setNumber hanya memiliki satu kalimat: this.params.splice (n-1,1, angka) Ubah array matriks sesuai dengan parameter yang ditularkan
pindahkan: fungsi (e, konteks) {e.preventdefault (); var touches = e.touches [0]; number = context.opt.vertical? Sentuh. 0: Context.Result; Context.Result = -Context.Result> Context.diff? -context.diff: context.result; // Pengaturan dinamis atribut elemen CSS if (context.matrix) {switch (context.matrix) {case 6: context.setnumber (6, context.Result) break; kasus 5: Context.setNumber (5, Context.Result) Break;} Context.Opt.Changetarget.css ('-WebKit-Transform', 'Matrix ('+Context.Par ams.join (',')+')')} else {context.opt.changetarget.css ('-webkit-transform', context.str+'('+context.result+'px)')}}},Touchend menentukan apakah fungsi callback perlu dieksekusi selama rilis
end: function (e, context) {e.preventdefault (); var touches = e.changedTouches [0]; var angka = context.opt.vertikal? Touches.pagey: Touches.pagex, n = number - Context.Initnumber; // Ketika jarak geser elemen lebih besar dari 10 dan nilai terjemahan elemen awal adalah 0 dan fungsi callback ada, kemudian jalankan fungsi callback if (n> 10 && context.LastNumber == 0 && context.opt.swipedown) {non -context. Context.LastNumber == -Context.Diff && Context.opt.swipeup) {context.opt.swipeup ();} // Tetapkan konstanta ke nilai hasil untuk memastikan beberapa situasi geser berturut -turut.Pada dasarnya, plugin jQuery sederhana selesai, kerangka kerja adalah sebagai berikut
; (function ($) {var a = function (m, n) {// function content}; a.prototype = {init: function () {}, start: function () {}, pindahkan: function () {}, end: function () {}, setNumber: function () {} {} $. fn.scroL = {}, function: function () {} {} {oj. obj.init ()}}) (jQuery)Saat dipanggil, berikut ini adalah:
$ (". outer"). simuscroll ({'outerheight': $ (". outer"). height (), 'innerHeight': $ ('. Inner'). height (), 'changetarget': $ (". Dalam"), 'swipeup': function () {console.log ('up')}, 'swipedown': function () {console.log ('down')}, vertikal: true})Di atas adalah efek pengguliran simulasi overflow simulasi JS+CSS3 yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!