Version simplifiée des compétences du composant_javascript d'aperçu des photos de téléphone mobile

Pauvre, j'utilise un téléphone mobile Huawei 3C, et il est facile d'utiliser les composants prêts à l'emploi d'autres personnes. Afin de m'adapter à un perdant comme moi, j'ai simplifié et écrit une version de l'effet d'aperçu photo. fonction de zoom pour le moment. Je pourrai réessayer quand j'aurai le temps de l'ajouter, vous pouvez également l'ajouter vous-même, c'est un projet open source sur github. Son adresse github est : https://github.com/tianxiangbing/mobile-photo-preview

Ce qui suit est un aperçu,

Exemples d'utilisation :

var photoPreview = new MobilePhotoPreview();
    photoPreview.init({
      target: $('.preview-list'),
      trigger: '.preview',
      show: function(c) {
        var del = $('<span class="icon-del"><span>');
        $('.imgViewTop', c).append(del);
        del.tap(function() {
          photoPreview.current.remove();
          photoPreview.hide();
        });
      }
    });

ou :

$('.preview-list').MobilePhotoPreview({
      trigger: '.preview',
      show: function(c) {
        var del = $('<span class="icon-del"><span>');
        $('.imgViewTop', c).append(del);
        var _this = this;
        del.tap(function() {
          _this.current.remove();
          _this.hide();
        });
      }
    });
　　

Remarque : Il n'y a pas de différence essentielle entre les deux méthodes.

Propriétés, méthodes et rappels de l'API :

cible :
Cela signifie que les éléments de ce conteneur déclencheront l'événement. Il s'agit d'une plage et est utilisée avec le déclencheur pour déléguer le nœud d'événement, c'est donc nécessaire. Il est recommandé de ne pas déléguer le nœud racine.
déclencheur :
Représente l'objet qui déclenche l'événement. Il peut être dynamique. Par défaut, il est déclenché par un lien sous la cible
. montrer :
Le rappel après affichage, le paramètre est le conteneur de dialogue, et celui-ci pointe actuellement vers l'instance de MobilePhotoPreview. Il s'agit d'une méthode de rappel pour étendre davantage de fonctions. Afin de mieux utiliser ce rappel, vous pourriez être intéressé par les propriétés suivantes
Propriétés et méthodes sous ceci :
actuel :
Objet nœud actuel
Indice actuel :
Indice actuel
objArr :
Objet tableau, ici, vous pouvez obtenir une collection, comprenant l'index, l'élément, la largeur et la hauteur. Ce sera très utile.
cacher :
Ce qu'on appelle, c'est la peau.

du dialogue

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.