Während der mobilen Entwicklung begegnen wir häufig Schiebereignisse. Wie wir alle wissen, hängt es hauptsächlich auf Touch -Events ab. Vor kurzem haben wir zwei Seiten begegnet, die ähnliche Auswirkungen wie Überlauf haben: Auto. Im Allgemeinen kann es durch CSS -Einstellungen erreicht werden (obwohl es etwas hässlich ist), aber sobald der Überlauf: Autoelement auf Berührungsereignisse reagiert, wird es viele Unannehmlichkeiten geben. Beispielsweise gleitet ein bestimmtes Element in FullPage automatisch. Wir können Normalscrollelements verwenden, um das Element beim Gleiten nicht zum nächsten Bildschirm zu bringen. Wenn das Element nach unten rutscht, kann es nicht auf das nächste Bildschirmereignis reagieren. Gleiches gilt für das nach oben gerichtete Schieben. Zu diesem Zeitpunkt ist das Touch -Ereignis erforderlich, um zu antworten. Für die Bequemlichkeit der Verkapselung in der Zukunft wird ein Jquery-Plug-In einfach verkapselt, und gleichzeitig überprüfen wir auch die JQuery-Plug-in-Entwicklungs- und Touch-Events.
Die allgemeine Idee des Plug-Ins lautet wie folgt: Der Bereich in der Box ist ein übergeordnetes Element mit fester Breite und Höhe (Überlauf eingestellt: versteckt), und die Höhe des untergeordneten Elements ist größer als das des übergeordneten Elements. Wir ändern den Übersetzungswert des untergeordneten Elements, indem wir auf das Touch -Ereignis reagieren (TOP ist auch möglich, aber die Übersetzungseffizienz ist höher). Natürlich müssen wir in diesem Zeitraum die Grenze des Übersetzungswerts des untergeordneten Elements beurteilen, das Maximum ist 0 und das Minimum ist die Höhe des untergeordneten Elementelementelements
PS: Wenn Sie das untergeordnete Element entsprechend dem Finger verschieben möchten, müssen Sie ein anderes Programm schreiben, nachdem Sie den Finger veröffentlicht und an die Grenze zurückgekehrt sind.
Schreiben wir Schritt für Schritt das Plugin
Der erste Schritt besteht darin, einen sicheren Zielfernrohr festzulegen
; (Funktion ($) {// Code einfügen}) (jQuery) Wenn wir die Methode $ ("#id"). $ .extend ({exec: function () {}}) // Diese Erweiterung nennt $ .fn.simuscroll = Funktion (Option) {var scrollobj = new SimusCroll (this, Option); return Scrollobj.init ();};};};};Schauen wir uns die Simuscroll -Methode im obigen Code an. Dies ist ein Konstruktor. Es akzeptiert zwei Parameter. ELE ist das Element, das derzeit Berührungsereignisse akzeptiert (im Allgemeinen als übergeordnetes Element festgelegt werden kann). Option ist die Konfigurationsparameter, die vom Benutzer übergeben wird, z.
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, um ein brandneues Objekt This.opt = jQuery.extend ({}, this.Setings, Option) zu erhalten; this.initnumber = this.lastnumber = this.result = 0; this.flag = false; // Berechnen Sie den Entfernungsunterschied zwischen dem untergeordneten Element und dem übergeordneten Element, um den maximalen Gleitabstand des Elements zu bestimmen. ? 0: this.diff; this.direction = '';};Beim Erweiterung des JQuery -Prototyps besteht der erste Schritt darin, den obigen Konstruktor zu instanziieren, und der zweite Schritt ruft direkt die Init -Methode des Konstruktors auf. Weitere Informationen finden Sie im Hinweis unten.
init: function () {// jQuery -Objekt bindet das Touch -Ereignis direkt, um das Ereignis zu erhalten, und muss das Ereignisattribut des nativen Objekts erhalten // jQuery -Objekt erhalten pagex event.originaleVent.touches [0] .Pagex // Dom -Objekt -Ereignis.touches [0] .Pagex var toption = this.opt.target.get (0); // Wenn die Höhe des untergeordneten Elements größer als das übergeordnete Element ist, führen Sie das Sieb Ereignis aus, andernfalls führen Sie die Rückruffunktion aus. Flag = this.diff> 0? 'Translate': 'exec';/*Wenn das Element eine der Transformationen, Skalierungen, Verseuchungen und Drehen in der Transformation festgelegt hat, werden wir die Transformation direkt festlegen: Translatey (10px) und überschreiben die anfänglichen Set -Attribute. Daher können wir nicht nur die ursprünglichen Attribute sicherstellen, indem wir den Matrixwert des Elements erhalten, sondern auch einen beliebigen Wert*/var csStext = this.opt.changetarget.css ('-webkit-transform')); if (csStext == 'none') {// Das Element hat das Transformationsattribut this.str = this.opt.VERTICAL nicht festgelegt? 'Translatey': 'Translatex';} else {this.str = csStext; var reg = /-?/d+/.?/d*/g; // regulärer Ausdruck/*den Matrixwert abrufen, der direkt durch jeden Parameter in Matrix erhalten wird, ähnelt der Matrix (1,0,0,0,0,0) und wird durch Matrix (1,0,0,1,0,0) erhalten, sodass wir den 5. Element eines bestimmten Wertes Array als Übersetzungswert des Elements des 6. Elements. this.str.match (reg); this.matrix = this.opt.VERTICAL? 6: 5; // kann den Wert bestimmen, der als Translatey oder Translatex basierend auf den übergebenen Parametern geändert werden soll contextTarget.adDeVentListener ('TouchStart', Funktion (e) {_ this.start (e, _this)}); target.adDeVentListener ('touch Move ', Funktion (e) {_ this.move (e, _this)}); target.adDeVentListener (' Touchend ', Funktion (e) {_ this.end (e, _this)});};};Die TouchStart -Methode ist relativ einfach, und der Anfangswert des Fingers berührt den Bildschirm entsprechend der Richtung, die Sie zum Schieben benötigen.
start: function (e, context) {e.preventDefault (); var touches = e.touches [0]; context.initnumber = context.opt.VERTICAL? toppes.pagey: toppes.pagex;},Die Touchmove -Methode ändert hauptsächlich die CSS -Attribute des Elements dynamisch basierend auf dem Fingerabstand, sodass sich das Element mit dem Finger bewegen kann
Die SETNumber-Methode hat nur einen Satz: Dies.Params.Splice (N-1,1, Nummer) Ändern des Matrix-Arrays nach den bestandenen Parametern
Bewegung: Funktion (e, context) {e.preventDefault (); var touches = e.touches [0]; number = context.opt.VERTICAL? toppes.pagey: toppes.pagex; // den Änderungswert relativ zum Finger abrufen, um den Bildschirm zu berühren var delta = nummer - context 0: context.result; context.result = -context.result> context.diff? -Context.diff: context.result; // Dynamische Einstellung des Element -CSS -Attributs if (context.matrix) {switch (context.matrix) {case 6: context.setNumber (6, context.result) break; Fall 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 bestimmt, ob die Rückruffunktion während der Veröffentlichung ausgeführt werden muss
Ende: Funktion (e, context) {e.preventDefault (); var toppes = e.Changedtouches [0]; var number = context.opt.VERTICAL? touches.pageY : touches.pageX,n = number - context.initNumber;//When the element's sliding distance is greater than 10 and the initial element's translation value is 0 and the callback function exists, then execute the callback function if(n>10 && context.lastNumber == 0 && context.opt.swipeDown){ context.opt.swipeDown()}else if(n<-10 && context.lastnumber == -context.diff && context.opt.SwipEUp) {context.opt.SwipEUp ();} // Setzen Sie die Konstante auf den Ergebniswert, um mehrere aufeinanderfolgende Sliding -Situation zu gewährleisten.Grundsätzlich wird ein einfaches Jquery-Plug-In abgeschlossen, das Framework lautet wie folgt
; (function ($) {var a = function (m, n) {// Funktionsinhalt}; A.Prototype = {init: function () {}, start: function () {}, move: function () {}, end: function () {}, setNumber: function () {{}} (}} $. fn.scrol () (O.scrol). obj.init ()}}) (jQuery)Wenn Sie angerufen werden, ist Folgendes:
$ (". Outer"). Simuscroll ({'äußere': $ (". Outer"). Height (), 'Innerheight': $ ('. Inner'). Height (), 'Changetarget': $ (". Inner"), 'SWIPEUP': function () {console.log ('up')}, 'Swipedown': function () {console.log ('down')}, vertikal: true})Das obige ist der vom Editor vorgestellte JS+CSS3 -Simulations -Überlauf -Scroll -Effekt. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!