Maison > interface Web > js tutoriel > Introduction au module Gesture dans le code source de Zepto

Introduction au module Gesture dans le code source de Zepto

一个新手
Libérer: 2017-09-25 09:28:07
original
2328 Les gens l'ont consulté

Le module

Gesture est basé sur l'encapsulation de l'événement IOS sur Gesture et utilise l'attribut scale pour encapsuler la série d'événements pinch.

Version du code source

Le code source lu dans cet article est zepto1.2.0

GitBook

"reading-zepto"

Structure globale

;(function($){
  if ($.os.ios) {    
  var gesture = {}, gestureTimeout

    $(document).bind('gesturestart', function(e){
     ...
    }).bind('gesturechange', function(e){
      ...
    }).bind('gestureend', function(e){
     ...
    })

    ;['pinch', 'pinchIn', 'pinchOut'].forEach(function(m){
      $.fn[m] = function(callback){ return this.bind(m, callback) }
    })
  }
})(Zepto)
Copier après la connexion

Notez qu'il y a ici un jugement $.os.ios, qui sert à juger si c'est ios. Cet arrêt nécessite l'introduction du module de détection d'appareil Detect. Ce module utilise userAgent pour la détection de périphériques, qui contient de nombreuses expressions régulières, ce module ne sera donc pas analysé plus tard.

Surveillez ensuite les événements gesturestart, gesturechange, gestureend En fonction de ces trois événements, les événements pinch, pinchIn et pinchOut peuvent être combinés. En fait, il s’agit d’une opération gestuelle de zoom avant et arrière.

L'objet variable gesture a des fonctions similaires à l'objet Touch dans le module touch Vous pouvez d'abord consulter l'analyse du module Touch dans "Touch Module Reading Zepto Source Code". .

parentIfText

function parentIfText(node){
  return 'tagName' in node ? node : node.parentNode
}
Copier après la connexion

Cette méthode auxiliaire consiste à obtenir le nœud cible. Si le nœud n'est pas un nœud d'élément, utilisez le nœud parent comme nœud cible. Si l'événement est déclenché sur un nœud de texte ou un élément de pseudo-classe, il ne s'agira pas d'un nœud d'élément.

Événement

gesturestart

bind('gesturestart', function(e){
  var now = Date.now(), delta = now - (gesture.last || now)
  gesture.target = parentIfText(e.target)
  gestureTimeout && clearTimeout(gestureTimeout)
  gesture.e1 = e.scale
  gesture.last = now
})
Copier après la connexion

Tout comme le module Touch, lorsque gesturestart, delta sert également à enregistrer le temps entre deux start intervalle de temps, utilisez gesture.target pour enregistrer l'élément cible, et e1 est la valeur de mise à l'échelle au point de départ.

gestechange

bind('gesturechange', function(e){
  gesture.e2 = e.scale
})
Copier après la connexion

À gesturechange, mettez à jour la valeur de mise à l'échelle du point final guesture.e2.

gesteend

if (gesture.e2 > 0) {  
    Math.abs(gesture.e1 - gesture.e2) != 0 && $(gesture.target).trigger('pinch') &&
    $(gesture.target).trigger('pinch' + (gesture.e1 - gesture.e2 > 0 ? 'In' : 'Out'))
  gesture.e1 = gesture.e2 = gesture.last = 0} else if ('last' in gesture) {
  gesture = {}
}
Copier après la connexion

Si gesture.e2 existe (il ne peut pas être inférieur à 0, n'est-ce pas ?), lorsque la valeur d'échelle du point de départ et la valeur d'échelle de les points finaux sont différents, déclenchez l'événement pinch ; si la valeur de zoom du point de départ est supérieure à la valeur de zoom du point final, continuez à déclencher l'événement pinchIn, et l'effet de zoom sera réduit si ; la valeur de zoom du point de départ est inférieure à la valeur de zoom du point final, continuez à déclencher l'événement pinchOut , c'est-à-dire l'effet d'amplification.

définit finalement e1 , e2 et last tous sur 0 .

Efface last s'il n'existe pas (lorsque preventDefault est appelé). gesture

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal