简化版手机端照片预览组件

简化版手机端照片预览组件

可怜的我用着华为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 = $('');

$('.imgViewTop', c).append(del);

del.tap(function() {

photoPreview.current.remove();

photoPreview.hide();

});

}

});

或者：

$('.preview-list').MobilePhotoPreview({

trigger: '.preview',

show: function(c) {

var del = $('');

$('.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:

&http://nbsp;   数组对象，在这里，你可以得到一个集合，包括索引、element、宽、高。这将会是很有用的东西。

hide:

    调用的是dialog的hide.

以上所述就是本文的全部内容了，希望大家能够喜欢。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。