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


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 相关文章推荐
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
使用layui的router来进行传参的实现方法
Sep 06 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数据库连接类~~做成一个分页类!
2006/11/25 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
Script的加载方法小结
2011/01/12 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
javaScript基础详解
2017/01/19 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
Python交换变量
2008/09/06 Python
django 单表操作实例详解
2019/07/30 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
keras多显卡训练方式
2020/06/10 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
大学自我鉴定
2013/12/20 职场文书
银行存款证明样本
2014/01/17 职场文书
学生打架检讨书大全
2014/01/23 职场文书
低碳环保口号
2014/06/12 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers
SQLServer常见数学函数梳理总结
2022/08/05 MySQL
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS