簡(jiǎn)化版手機(jī)端照片預(yù)覽組件
可憐的我用著華為3C手機(jī),用別人現(xiàn)成的組件都好卡,為了適應(yīng)我這種屌絲,于是自己簡(jiǎn)化寫了一版的照片預(yù)覽效果,暫時(shí)無縮放功能,以后可能有空再加吧,你也可以自己加下,這是個(gè)github上的開源項(xiàng)目。它的github地址是:https://github.com/tianxiangbing/mobile-photo-preview
下面是預(yù)覽圖,
使用方法案例:
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(); }); } });
注:兩種方法沒有本質(zhì)的區(qū)別,推薦第一種。
API 屬性、方法及回調(diào):
target:
表示是在這個(gè)容器內(nèi)的元素會(huì)觸發(fā)事件,它是一個(gè)范圍,與trigger一同使用,委托事件節(jié)點(diǎn),所以是必須的。建議不作根結(jié)點(diǎn)的委托.
trigger:
表示觸發(fā)事件的對(duì)象,它可以是動(dòng)態(tài)的,默認(rèn)是target下面的a鏈接觸發(fā)
show:
顯示之后的回調(diào),參數(shù)是dialog容器,當(dāng)前this指向MobilePhotoPreview的實(shí)例。這是一個(gè)為了擴(kuò)展更多功能的回調(diào)方法。為了更好的用到這個(gè)回調(diào),你可以會(huì)對(duì)下面的屬性有興趣了解
this下的屬性及方法:
current:
當(dāng)前的結(jié)點(diǎn)對(duì)象
currentIndex:
當(dāng)前索引
objArr:
數(shù)組對(duì)象,在這里,你可以得到一個(gè)集合,包括索引、element、寬、高。這將會(huì)是很有用的東西。
hide:
調(diào)用的是dialog的hide.
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
相關(guān)文章
js實(shí)用技巧之去除數(shù)組或者對(duì)象里重復(fù)選項(xiàng)
這篇文章主要給大家介紹了關(guān)于js實(shí)用技巧之去除數(shù)組或者對(duì)象里重復(fù)選項(xiàng)的相關(guān)資料,JavaScript數(shù)組有很多內(nèi)置方法,可以操作和處理數(shù)據(jù),文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08javascript適配器模式和組合模式原理與實(shí)現(xiàn)方法詳解
這篇文章主要介紹了javascript適配器模式和組合模式原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了javascript適配器模式與組合模式相關(guān)原理、功能、實(shí)現(xiàn)方法與注意事項(xiàng),需要的朋友可以參考下2023-07-07基于原生CSS+JS實(shí)現(xiàn)一個(gè)標(biāo)簽輸入框
在各種框架大行其道的氛圍下,有些原生的屬性和方法可能都不太關(guān)注了,這也不失為是一種損失。本文就將利用原生CSS+JS實(shí)現(xiàn)一個(gè)簡(jiǎn)單的標(biāo)簽輸入框,感興趣的可以了解一下2022-04-04如何實(shí)現(xiàn)JavaScript動(dòng)態(tài)加載CSS和JS文件
這篇文章主要為大家詳細(xì)介紹了JavaScript動(dòng)態(tài)加載CSS和JS文件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-10-10微信小程序網(wǎng)絡(luò)請(qǐng)求的封裝與填坑之路
本文主要介紹了關(guān)于小程序網(wǎng)絡(luò)請(qǐng)求的封裝的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04js圖片延遲加載(Lazyload)三種實(shí)現(xiàn)方式
這篇文章主要介紹了js延遲加載(Lazyload)三種實(shí)現(xiàn)方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03JavaScript如何使用dhtmlXTreeObject的loadJSONObject繪制目錄樹
這篇文章主要介紹了JavaScript如何使用dhtmlXTreeObject的loadJSONObject繪制目錄樹,需要引入dhtmlXTreeObject的css和js文件,這里還需要注意js的引用順序,本文給大家介紹的非常詳細(xì),需要的的朋友參考下吧2023-11-11將字符串轉(zhuǎn)換成gb2312或者utf-8編碼的參數(shù)(js版)
直接在url中傳遞中文參數(shù)時(shí),讀到的中文都是亂碼,那么我們應(yīng)該怎么將這些參數(shù)轉(zhuǎn)換呢,接下來與大家分享下將字符串轉(zhuǎn)換成utf-8或者gb2312編碼的參數(shù)的技巧2013-04-04