可憐的我用著華為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.
以上所述就是本文的全部內容了,希望大家能夠喜歡。