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


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_10_对象模型
Oct 16 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
详解VUE 数组更新
Dec 16 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 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
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
PHP实现文件上传与下载
2020/08/28 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
JS实现留言板功能
2017/06/17 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python三大神器之fabric使用教程
2019/06/10 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
小学生成长感言
2014/01/30 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
高中生逃课检讨书
2014/10/10 职场文书
简单租房协议书
2014/10/21 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python