携帯電話写真プレビューの簡易版コンポーネント_JavaScriptスキル

残念ながら、私は Huawei 3C 携帯電話を使用していますが、私のような敗者に適応するために、他の人の既製のコンポーネントを使用するのは簡単です。写真のプレビュー効果のバージョンを簡略化して作成しました。当面はズーム機能を追加します。これは github 上のオープンソース プロジェクトです。自分で追加することもできます。その github アドレスは次のとおりです: https://github.com/tianxiangbing/mobile-photo-preview

以下はプレビューです。

使用例:

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();
        });
      }
    });

または:

$('.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();
        });
      }
    });
　　

注: 2 つの方法に本質的な違いはありません。最初の方法をお勧めします。

API プロパティ、メソッド、コールバック:

ターゲット:
これは、このコンテナ内の要素がイベントをトリガーすることを意味します。これは範囲であり、イベント ノードを委任するためにトリガーとともに使用されるため、必要です。ルートノードを委任しないことをお勧めします。
トリガー:
イベントをトリガーするオブジェクトを表します。デフォルトでは、ターゲット
の下のリンクによってトリガーされます。 ショー:
表示後のコールバック、パラメーターはダイアログ コンテナーであり、これは現在 MobilePhotoPreview のインスタンスを指します。これは、より多くの機能を拡張するためのコールバック メソッドです。このコールバックをより効果的に使用するには、次のプロパティに興味があるかもしれません
この下のプロパティとメソッド:
現在:
現在のノード オブジェクト
currentIndex:
現在のインデックス
objArr:
配列オブジェクト。ここでは、インデックス、要素、幅、高さを含むコレクションを取得できます。これはとても便利なものになります。
非表示:
いわゆるダイアログの非表示

です。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。