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