簡化版手機端照片預覽元件_javascript技巧

可憐的我用著華為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();
        });
      }
    });
　　

註：兩種方法沒有本質上的區別，推薦第一種。

API 屬性、方法及回呼：

target:
    表示是在這個容器內的元素會觸發事件，它是一個範圍，與trigger一同使用，委託事件節點，所以是必須的。建議不要根結點的委託.
trigger:
    表示觸發事件的對象，它可以是動態的，預設是target下面的a連結觸發
show:
    顯示之後的回調，參數是dialog容器，目前this指向MobilePhotoPreview的實例。這是一個為了擴展更多功能的回調方法。為了更好的用到這個回調，你可以會對下面的屬性有興趣了解
this下的屬性及方法：
current:
    目前的結點物件
currentIndex:
    目前索引
objArr:
    數組對象，在這裡，你可以得到一個集合，包括索引、element、寬、高。這將會是很有用的東西。
hide:
    呼叫的是dialog的hide.

以上所述就是本文的全部內容了，希望大家能夠喜歡。