当前位置：首页 > 资讯 > 技术文档

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

时间：2020-02-04 17:13 编辑：来源：阅读：
扫一扫，手机访问

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

可怜的我用着华为3C手机，用别人现成的组件都好卡，为了适应我这种屌丝，于是自己简化写了一版的照片预览效果，暂时无缩放功能，以后可能有空再加吧，你也可以自己加下，这是个github上的开源项目。它的github地址是：[url=https://github.com/tianxiangbing/mobile-photo-preview]https://github.com/tianxiangbing/mobile-photo-preview[/url] 下面是预览图， [img]http://files.jb51.net/file_images/article/201504/201504131044075.png[/img] 使用方法案例:

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. 以上所述就是本文的全部内容了，希望大家能够喜欢。

全部评论(0)

上一篇：JavaScript实现穷举排列(permutation)算法谜题解答
下一篇：javascript确认框的三种使用方法

资讯排行榜
更多>>