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


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中字符串拼接需注意的问题
Jul 13 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
JavaScript错误处理
Feb 03 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
javascript实现切割轮播效果
Nov 28 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学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
jquery.validate分组验证代码
2011/03/17 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
Python批量更改文件名的实现方法
2017/10/29 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
python处理RSTP视频流过程解析
2020/01/11 Python
python的列表List求均值和中位数实例
2020/03/03 Python
Python pandas如何向excel添加数据
2020/05/22 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
妇产科护士自我鉴定
2013/10/15 职场文书
道德模范先进事迹
2014/02/14 职场文书
2019年个人工作总结范文
2019/03/25 职场文书