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


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 相关文章推荐
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
微信小程序实现笑脸评分功能
Nov 03 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 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
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
Python探索之创建二叉树
2017/10/25 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
pygame实现飞机大战
2020/03/11 Python
通俗讲解python 装饰器
2020/09/07 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
买卖协议书范本
2014/04/21 职场文书
导游词300字
2015/02/13 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL