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


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实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
详解react组件通讯方式(多种)
May 06 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
jQuery技巧总结
2011/01/01 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
详解Python之unittest单元测试代码
2018/01/24 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
Python运行异常管理解决方案
2020/03/09 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
业务助理岗位职责
2013/11/18 职场文书
实习生自我鉴定
2013/12/12 职场文书
医生进修自我鉴定
2014/01/19 职场文书
《石榴》教学反思
2014/03/02 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
酒后驾车标语
2014/06/30 职场文书
教师三严三实心得体会
2014/10/11 职场文书
先进员工事迹材料
2014/12/20 职场文书
2015年副班长工作总结
2015/05/15 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS