[js开源组件开发]-手机端照片预览组件
手机端照片预览组件
可怜的我用着华为3C手机,用别人现成的组件都好卡,为了适应我这种屌丝,于是自己简化写了一版的照片预览效果,暂时无缩放功能,以后可能有空再加吧,你也可以自己加下,这是个github上的开源项目。它的github地址是:https://github.com/tianxiangbing/mobile-photo-preview
下面是预览图,它的完整demo请点击这里手机端照片预览组件demo
使用方法案例:
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.
[js开源组件开发]-手机端照片预览组件的更多相关文章
- 手机端图片预览和缩放js
转至:http://blog.sina.com.cn/s/blog_c342e3090102vcxu.html 1.手机端的图片选择和预览 <input type="file" ...
- 移动端上传照片 预览+Draw on Canvas's Demo(解决 iOS 等设备照片旋转 90 度的 bug)
背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...
- layui 表格中实现照片预览,点击查看原图
人员表格中实现照片预览,并且可点击放大.查看原图 <table id="dutyInfoTable" class="layui-hide">< ...
- 李洪强iOS开发之苹果使用预览截图
李洪强iOS开发之苹果使用预览截图 01 在预览的图片中选中你要截得区域 02 - command + C 03 - Command + N 04 - Command + S (保存)
- 图片预览组件PhotoView
图片预览组件PhotoView PhotoView是一款图片预览组件,广泛应用于大图的查看.该组件支持图片手势缩放.旋转等功能.它可以很好的和ViewPager.Picasso等组件结合,实现各种复杂 ...
- 最好用的js前端框架、组件、文档在线预览插件
这里收集的都是个人认为比较好的js框架.组件 js前端ui框架 此处列举出个人认为最好的几个框架(排序即排名),现在好点的框架商用都需要付费,以下几个也不例外,但是由于组件丰富,都可以作为企业应用的完 ...
- vue+node开发手机端h5页面开发遇到的坑
项目进行中...随时更新 这里记录了一些手机端调试的方式 一 css 1.文字超过span宽度显示...(单行文字) .topWrap .introduce span { padding: 0 17p ...
- vux 组件打造手机端项目
其实,我用vux组件的过程是这样的,哇!太方便了!!功能好全!!太简单了!!然后,就各种"跳坑".以下排坑环节. 1.安装vux:cnpm i -S vux; 比较顺利吧. 2 ...
- 新闻网站开发-手机端-基于Wordpress
暂时写下来下面记录整个网站制作流程,由于是边学便用,代码质量和性能不能保证,仅仅为之前没做过的朋友提供个小小的参考: 下面先贴出网站,记得用手机或者[Opera Mobile Emulator]打开, ...
随机推荐
- [转]两种Sigma-Delta ADC SNR仿真方法
假设现有一组Sigma-Delta ADC输出序列,下面将介绍两种计算出相应SNR的方法.其中由cadence导出数据的CIW窗口命令为:ocPrint(?output "输出目录/输出文件 ...
- Unity3D 中 Generic 动画导入设置和 Root Motion 之间的关系
2条评论 Unity3D 的 Mecanim 动画系统可以直接复用 3DS MAX 中制作的动画文件中的位移,这个就是通过 applyRootMotion 来达成的,我们只需要在使用 Animator ...
- mysql int(1) 与 tinyint(1) 有什么区别?
From: http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/08/25/2153016.html mysql int(1) tinyint ...
- Science上发表的超赞聚类算法
本博客已经迁往http://www.kemaswill.com/, 博客园这边也会继续更新, 欢迎关注~ 作者(Alex Rodriguez, Alessandro Laio)提出了一种很简洁优美的聚 ...
- ServiceStack 介绍
关于ServiceStack ServiceStack 官网介绍: Opensource .NET and Mono REST Web Services framework 什么是 ServiceSt ...
- JavaScript之Array常用函数汇总
[20141121]JavaScript之Array常用功能汇总 *:first-child { margin-top: 0 !important; } body>*:last-child { ...
- Pattern Lab - 构建先进的原子设计系统
Pattern Lab 是一个工具集,帮助您创建原子设计系统.在它的核心,是一个自定义静态网站生成器,构建了类似原子,分子和界面结合在一起,形成模板和页面.Pattern Lab 可以作为项目的模式库 ...
- LeetCode——Serialize and Deserialize Binary Tree
Description: Serialization is the process of converting a data structure or object into a sequence o ...
- [git]通过commit_id找回文件
git checkout commit_id 这样会切换到这个commit_id的上,文件的内容就是这个commit保存的内容. git checkout -b new_branch_name com ...
- 如何用参数化SQL语句污染你的计划缓存
你的SQL语句的参数化总是个好想法.使用参数化SQL语句你不会污染你的计划缓存——错!!!在这篇文章里我想向你展示下用参数化SQL语句就可以污染你的计划缓存,这是非常简单的! ADO.NET-AddW ...