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


Posted in Javascript onApril 13, 2015

可怜的我用着华为3C手机,用别人现成的组件都好卡,为了适应我这种?潘浚?谑亲约杭蚧?戳艘话娴恼掌?だ佬Ч??菔蔽匏醴殴δ埽?院罂赡苡锌赵偌影桑?阋部梢宰约杭酉拢?馐歉?ithub上的开源项目。它的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.

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

Javascript 相关文章推荐
javascript 特性检测并非浏览器检测
Jan 15 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
iScroll.js 使用方法参考
May 16 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
javascript引用类型指针的工作方式
Apr 13 #Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 #Javascript
使用jQuery实现更改默认alert框体
Apr 13 #Javascript
javascript异步处理工作机制详解
Apr 13 #Javascript
JavaScript中DOM详解
Apr 13 #Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 #Javascript
javascript中scrollTop详解
Apr 13 #Javascript
You might like
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
php测试kafka项目示例
2020/02/06 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
python实现windows下文件备份脚本
2018/05/27 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Python 导入文件过程图解
2019/10/15 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
python实现从ftp服务器下载文件
2020/03/03 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
管道维修工岗位职责
2013/12/27 职场文书
2014年后勤工作总结
2014/11/18 职场文书
保送生自荐信
2015/03/06 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
导游词之凤凰古城
2019/10/22 职场文书
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏
Nginx配置之禁止指定IP访问
2022/05/02 Servers
MySQL深分页问题解决思路
2022/12/24 MySQL