星空网 > 软件开发 > Java

[js开源组件开发]

手机端照片预览组件

可怜的我用着华为3C手机,用别人现成的组件都好卡,为了适应我这种屌丝,于是自己简化写了一版的照片预览效果,暂时无缩放功能,以后可能有空再加吧,你也可以自己加下,这是个github上的开源项目。它的github地址是:https://github.com/tianxiangbing/mobile-photo-preview

下面是预览图,它的完整demo请点击这里手机端照片预览组件demo

[js开源组件开发]

 

使用方法案例:

 var photoPreview = new MobilePhotoPreview();	  photoPreview.init({	    target: $('.preview-list'),	    trigger: '.preview',	    show: function(c) {	      var del = $('<span ><span>');	      $('.imgViewTop', c).append(del);	      del.tap(function() {	        photoPreview.current.remove();	        photoPreview.hide();	      });	    }	  });

  

或者:

 $('.preview-list').MobilePhotoPreview({	    trigger: '.preview',	    show: function(c) {	      var del = $('<span ><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.



原标题:[js开源组件开发]

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

营销邮件调查报告出炉,2018旺季营销邮件终极指南:https://www.ikjzd.com/articles/6206
出口退税单证的补办程式:https://www.ikjzd.com/articles/6207
大促预热稽查来临!你的账号有危险!:https://www.ikjzd.com/articles/6209
阿里巴巴速卖通蝉联以色列最受欢迎购物平台:https://www.ikjzd.com/articles/622
如何让新品快速出单:https://www.ikjzd.com/articles/6220
大量卖家因MWS授权被封号 / 特朗普再威胁2670亿美元关税:https://www.ikjzd.com/articles/6222
深圳西乡三月三北帝庙会的千岁盆菜多少钱:https://www.vstour.cn/a/365180.html
TikTok SEO:TikTok会取代谷歌吗?:https://www.kjdsnews.com/a/1836538.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流