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


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和CSS速查手册
Aug 20 Javascript
JavaScript 继承详解(四)
Jul 13 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 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中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
全面解析Python的While循环语句的使用方法
2015/10/13 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
CLR与IL分别是什么含义
2016/08/23 面试题
少先队学雷锋活动月总结
2014/03/09 职场文书
经典禁毒标语
2014/06/16 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android