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


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 相关文章推荐
改变隐藏的input中value的值代码
Dec 30 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
p5.js临摹旋转爱心
Oct 23 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
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
php实现socket推送技术的示例
2017/12/20 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
javascript类型转换示例
2014/04/29 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
python删除列表中重复记录的方法
2015/04/28 Python
星球大战与Python之间的那些事
2016/01/07 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
实习推荐信
2014/05/10 职场文书
白血病捐款倡议书
2014/05/14 职场文书
师范毕业生求职信
2014/07/11 职场文书
2014年环卫工作总结
2014/11/22 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS