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


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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
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
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
Python代码解决RenderView窗口not found问题
2016/08/28 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
详解python中__name__的意义以及作用
2019/08/07 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
火锅店创业计划书范文
2014/02/02 职场文书
五型班组建设方案
2014/02/10 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
企业趣味活动方案
2014/08/21 职场文书
党章培训心得体会
2014/09/04 职场文书
先进工作者个人总结
2015/02/15 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书