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


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 自定义的联动下拉框
Feb 07 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
JS实现购物车基本功能
Nov 08 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
php多文件上传功能实现原理及代码
2013/04/18 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
Python的函数嵌套的使用方法
2014/01/24 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
全面了解python字符串和字典
2016/07/07 Python
python类中super()和__init__()的区别
2016/10/18 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
解决Django连接db遇到的问题
2019/08/29 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
考试作弊检讨
2015/01/27 职场文书
瘦西湖导游词
2015/02/03 职场文书
护士医德考评自我评价
2015/03/03 职场文书
花田少年史观后感
2015/06/16 职场文书
开网店计划分析
2019/07/30 职场文书
数据设计之权限的实现
2022/08/05 MySQL