Pendant le développement mobile, nous rencontrons souvent des événements glissants. Comme nous le savons tous, glisser sur les téléphones mobiles repose principalement sur des événements tactiles. Récemment, nous avons rencontré deux pages qui ont des effets similaires au débordement: auto. Généralement, il peut être réalisé via les paramètres CSS (bien qu'il soit un peu moche), mais une fois que l'élément Auto: Auto répond aux événements tactiles, il y aura de nombreux inconvénients. Par exemple, un certain élément de FullPage glisse automatiquement. Nous pouvons utiliser NormalsCrollements pour faire en sorte que l'élément ne glisse pas vers l'écran suivant lors du glissement, mais lorsque l'élément glisse vers le bas, il ne peut pas répondre à l'événement d'écran suivant. Il en va de même pour glisser vers le haut. Pour le moment, l'événement tactile est nécessaire pour répondre. Pour la commodité de l'encapsulation à l'avenir, un plug-in jQuery est simplement encapsulé, et en même temps, nous passons également en revue le développement du plug-in et les événements du jQuery;
L'idée générale du plug-in est la suivante: la zone de la boîte est un élément parent avec une largeur et une hauteur fixe (set débordement: caché), et la hauteur de l'élément enfant est supérieure à celle de l'élément parent. Nous modifions la valeur de traduis de l'élément enfant en répondant à l'événement tactile (le haut est également possible, mais l'efficacité de traduction est plus élevée). Bien sûr, au cours de cette période, nous devons juger de la limite de la valeur de traduire de l'élément enfant, le maximum est 0 et le minimum est la hauteur de l'élément enfant parent de l'enfant
PS: Si vous souhaitez déplacer l'élément enfant en fonction du doigt, vous devez écrire un autre programme après avoir relâché le doigt et revenir à la frontière.
Écrivons le plugin étape par étape
La première étape consiste à établir une portée sûre
; (fonction ($) {// insérer le code}) (jQuery) Si nous devons appeler à travers la méthode $ ("# id"). xx (), nous devons l'écrire comme ci-dessous, ici le prototype de FN et jQuery; $ .Extend ({exec: function () {}}) // Cette extension appelle $ .fn.simuscroll = function (option) {var scrolloBj = new simuscroll (this, option); return scrollobj.init ();};Jetons un coup d'œil à la méthode SIMUSCROLL dans le code ci-dessus. Ceci est un constructeur. Il accepte deux paramètres. ELE est l'élément qui accepte actuellement les événements tactiles (peut généralement être défini en tant qu'élément parent), l'option est les paramètres de configuration passés par l'utilisateur, tels que la modification de l'élément traduit, la hauteur de l'élément de l'élément parent, le supplément est la hauteur qui doit être ajoutée, la fonction de rappel exécutée lors de la glissement en haut ou en bas, etc.
var simuscroll = function (ele, option) {this.settings = {cible: ele, // element element Changetarget: '', exterheight: '800', // hauteur extérieure innerheight: '500', // innerheight extra: '0', // de distance supplémentaire swipeup: null, swipedown, null, vertical: true}; // prolonge les paramètres de défaut. Pour obtenir un tout nouvel objet this.opt = jQuery.Extend ({}, this.settings, option); this.initNumber = this.lastNumber = this.result = 0; this.flag = false; // calculer la différence de distance entre l'élément enfant et l'élément parent pour déterminer la distance de glissement maximale de l'élément this.diff = parsefloat (this.opt.innerheight) - parsefloat (this.opt.outerHeight) + parsefloat (this.opTh <0? 0: this.diff; this.direction = '';};Lors de l'extension du prototype jQuery, la première étape consiste à instancier le constructeur ci-dessus, et la deuxième étape appelle directement la méthode init du constructeur. Voir la note ci-dessous pour plus de détails.
init: function () {// jQuery Object lie directement l'événement tactile pour obtenir l'événement, il faut obtenir l'attribut d'événement de l'objet natif // objet jQuery obtient Pagex Event.originalevent.touches [0] .Pagex // Dom Object Event.touches [0] .Pagex var Target = this.opt.target.get (0); // Si la hauteur de l'élément enfant est supérieure à l'élément parent, exécutez l'événement de glissement, sinon exécutez la fonction de rappel this.flag = this.diff> 0? 'tradlate': 'exec'; / * Si l'élément a défini l'une des transformations, l'échelle, les biais et la rotation dans la transformation, alors nous définirons directement la transformée: tradlatey (10px) et écraser les attributs de définition initiaux. Nous pouvons donc non seulement assurer les attributs d'origine en obtenant la valeur matricielle de l'élément, mais également définir n'importe quelle valeur * / var csstext = this.opt.changetarget.css ('- webkit-transform'); if (csstext == 'non') {// L'élément n'a pas défini l'attribut de transformation ce.str = this.opt.vertical? 'tradlatey': 'translatex';} else {this.str = csstext; var reg = /-?/d+/.?/d*/g; // Expression régulière / * Obtenir la valeur matricielle obtenue directement par chaque paramètre dans la matrice est similaire à la matrice (1,0,0,0,1,0,0) et obtenue par matrice (1,0,0,1,1,0,0) afin que nous puissions modifier arbitrairement le 5ème élément d'un certain tableau de valeur. this.str.match (reg); this.matrix = this.opt.vertical? 6: 5; // peut déterminer la valeur à modifier en tant que tradlatey ou tradlatex en fonction des paramètres passés} var _This = this; // l'élément parent lie l'événement tactile, passe l'objet d'événement et contextTarget.AddeventListener ('Touchstart', fonction (e) {_ this.start (e, _this)}); target.addeventListener ('touch Move ', fonction (e) {_ this.move (e, _this)}); target.addeventListener (' touchend ', fonction (e) {_ this.end (e, _this)});}La méthode Touchstart est relativement simple et la valeur initiale du doigt touche l'écran est enregistrée en fonction de la direction que vous devez glisser.
Démarrer: fonction (e, contexte) {e.PreventDefault (); var touches = e.touches [0]; context.initNumber = context.opt.vertical? touches.pagey: touches.pagex;},La méthode TouchMove modifie principalement les attributs CSS de l'élément dynamiquement en fonction de la distance de glissement des doigts, afin que l'élément puisse se déplacer avec le doigt
La méthode SetNumber n'a qu'une seule phrase: this.params.splice (n-1,1, numéro) change de matrice de matrice en fonction des paramètres passés
MOVE: fonction (e, context) {e.PreventDefault (); var touches = e.touches [0]; nombre = context.opt.vertical? touches.pagey: touches.pagex; // obtenez la valeur de modification par rapport au doigt en touchant l'écran var delta = nombre - context.initNumber; if (context.flag == 'trada') {// si vous devez glisser context.result.Result.Result = context.result> 0? 0: context.result; context.result = -context.result> context.diff? -context.diff: context.result; // Réglage dynamique de l'élément CSS Attribut if (context.matrix) {switch (context.matrix) {cas 6: context.setNumber (6, context.result) Break; cas 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 détermine si la fonction de rappel doit être exécutée lors de la libération
fin: fonction (e, context) {e.PreventDefault (); var touches = e.changedTouches [0]; var nombre = context.opt.vertical? touches.pagey: touches.pagex, n = nombre - context.initnumber; // lorsque la distance de glissement de l'élément est supérieure à 10 et que la valeur de traduction de l'élément initial est 0 et que la fonction de rappel existe, puis exécutez la fonction de rappel if (n> 10 && context.lastNumber == 0 && context.opt.swipedown) {context.opt.swipedown ()} context.lastNumber == -Context.diff && context.opt.swipeUp) {context.opt.swipeUp ();} // définit la constante sur la valeur du résultat pour assurer plusieurs sites de glissement consécutif.LastNumber = context.result;}Fondamentalement, un simple plug-in jQuery est terminé, le cadre est le suivant
(fonction ($) {var a = fonction (m, n) {// contenu de fonction}; a.prototype = {init: function () {}, start: function () {}, move: function () {}, end: function () {}, setNumber: function () {}} $. obj.init ()}}) (jQuery)Lorsqu'il est appelé, ce qui suit est:
$ (". exter"). simuscroll ({'outerheight': $ (". exter"). height (), 'innerheight': $ ('. inner'). hight (), 'changetarget': $ (".Ce qui précède est l'effet de défilement de débordement de la simulation JS + CSS3 qui vous est présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!