简化版手机端照片预览组件
更新时间：2015年04月13日 10:45:10 投稿：hebedich
这篇文章主要介绍了简化版手机端照片预览组件的相关资料,需要的朋友可以参考下
可怜的我用着华为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.
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关文章
这篇文章主要给大家介绍了关于在Typescript中如何使用for...in的相关资料,以及TypeScript中使用for...in遍历对象属性会报错的解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
对动态加载脚本，需要重点关注的一个问题是，所动态加载的JS脚本的接口依赖问题。2011-01-01
这篇文章主要给大家介绍了关于js实用技巧之去除数组或者对象里重复选项的相关资料,JavaScript数组有很多内置方法,可以操作和处理数据,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了javascript适配器模式和组合模式原理与实现方法,结合实例形式详细分析了javascript适配器模式与组合模式相关原理、功能、实现方法与注意事项,需要的朋友可以参考下2023-07-07
在各种框架大行其道的氛围下，有些原生的属性和方法可能都不太关注了，这也不失为是一种损失。本文就将利用原生CSS+JS实现一个简单的标签输入框，感兴趣的可以了解一下2022-04-04
这篇文章主要为大家详细介绍了JavaScript动态加载CSS和JS文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-10-10
本文主要介绍了关于小程序网络请求的封装的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要介绍了js延迟加载(Lazyload)三种实现方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
JavaScript如何使用dhtmlXTreeObject的loadJSONObject绘制目录树
这篇文章主要介绍了JavaScript如何使用dhtmlXTreeObject的loadJSONObject绘制目录树,需要引入dhtmlXTreeObject的css和js文件,这里还需要注意js的引用顺序,本文给大家介绍的非常详细,需要的的朋友参考下吧2023-11-11
将字符串转换成gb2312或者utf-8编码的参数(js版)
直接在url中传递中文参数时，读到的中文都是乱码，那么我们应该怎么将这些参数转换呢，接下来与大家分享下将字符串转换成utf-8或者gb2312编码的参数的技巧2013-04-04
最新评论