可怜的我用着华为3C手机,用别人现成的组件都好卡,为了适应我这种屌丝,于是自己简化写了一版的照片预览效果,暂时无缩放功能,以后可能有空再加吧,你也可以自己加下,这是个github上的开源项目。它的github地址是:https://github.com/tianxiangbing/mobile-photo-preview

下面是预览图,它的完整demo请点击这里手机端照片预览组件demo

 

使用方法案例:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
varphotoPreview =newMobilePhotoPreview();
       photoPreview.init({
           target: $('.preview-list'),
           trigger:'.preview',
           show: function(c) {
               vardel = $('<span class="icon-del"><span>');
               $('.imgViewTop', c).append(del);
               del.tap(function() {
                   photoPreview.current.remove();
                   photoPreview.hide();
               });
           }
       });

  

或者:

?
1
2
3
4
5
6
7
8
9
10
11
12
$('.preview-list').MobilePhotoPreview({
           trigger:'.preview',
           show: function(c) {
               vardel = $('<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.