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


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 相关文章推荐
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
Bootstrap插件全集
2016/07/18 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
JSONP基础知识详解
2017/03/19 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
python的keyword模块用法实例分析
2015/06/30 Python
浅谈Python 对象内存占用
2016/07/15 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
python ubplot使用方法解析
2020/01/10 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
优秀的自荐信要注意哪些
2014/01/03 职场文书
奥利奥广告词
2014/03/20 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
法院授权委托书格式
2014/09/28 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
故宫的导游词
2015/01/31 职场文书
golang 语言中错误处理机制
2021/08/30 Golang