本文實例為大家分享了js圖片檢視器插件的使用方法，製作手機使用的網頁圖片檢視器，供大家參考，具體內容如下
這幾天抽空在為專案開發一個量身的圖片檢視器，目前已初步完成需求。
開發場景是：在一個多文件下載展示列表中，如檢測某些文件為圖片時，則點擊該文件時打開圖片查看器展示該圖片，並將列表內其它圖片同時展示查看器隊列內，可供前後滑動查看及其它附帶功能。
乍一聽功能點似乎有點多而且有些複雜，需要梳理一下
功能點整理
首先，我們要獲得點擊的圖片文件對象及符合條件的圖片文件對象集
其次，圖片查看器的製作及圖片佇列展示
然後，圖片友善載入方式
最後，圖片檢視器觸控滑動及滑動後相關功能的實現
簡單整理了一下，好像也不多
製作手機網頁圖片檢視器
根據功能點為正式開發做好準備
首先：我們為已知列表容器內圖片文件添加統一標識，文件是否為圖片及圖片路徑我們在存儲時已知，直接為元素添加統一屬性
其次：製作一個全螢幕灰色背景，展示圖片隊列，並以NO./n形式標註當前展示圖片位置；所有樣式全部給出，就不一一細說了（figure樣式內部分屬性為swipe.js必須）
.dialog,.dialog figure{position:fixed;top:0;bottom:0;left:0;right:0;z-index:1001;}
.dialog section{height:100%;background:#333;-webkit-opacity:0.7;}
.dialog footer{padding:10px;position:absolute;bottom:0;left:0;right:0;z-index:1002;font-size:13px;}
.dialog footer span{padding:0 20px;float:right;border:1px solid #999;border-radius:15px;color:#ddd;}
.dialog figure{overflow:hidden;}
.dialog figure ul{height:100%;overflow:hidden;}
.dialog figure li{width:100%;height:100%;display:-webkit-box;float:left;position:relative;-webkit-box-pack:center;-webkit-box-align:center;}
.dialog figure img{max-width:100%;max-height:100%;margin:10px;}
然後：初始化時把圖片直接換成loading.gif圖片，然後動態載入
最後：swipe.js輕量級觸控滑動外掛程式學習使用，先呼叫
var obj = document.getElementById('swipe');
window.mySwipe = Swipe(obj, {
...
});
設定參數
startSlide : 0, //起始位置
auto : 3000, //自动播放时间
continuous : true, //无限循环; 个人建议所有项个数不确定时赋值false, 不然为2的时候很2
disableScroll : false, //触摸时禁止滚屏
callback : function(index, element){}, //滑动时回调函数, 参数为滑动元素排序与对象
transitionEnd : function(index, element){} //滑动完成后回调函数, 参数同上基本html結構
prev(); //上一页 next(); //下一页 getPos(); //当前页索引 getNumSlides(); //所有项个数 slide(index, duration); //滑动效果
<figure id="swipe"> <ul> <li></li> </ul> </figure>
完整開發正式開始
我們通過列表的統一觸發事件，獲取觸發對象的url屬性，如該屬性存在則調用圖片查看器並停止後面進入下載界面程序
figure{overflow:hidden;position:relative;}
figure ul{overflow:hidden;}
figure li{width:100%;float:left;position:relative;}
現在進入數據收集完畢後加工處理環處理環，首先展示一下我們的對像模型，對像模型的屬性及方法的定義規則
$('.download a').click(function(){
var obj = $(this);
var url = obj.attr('url');
if(url && url.length > 0){
var set = $('.download a[url]');
base_module.dialog(obj, set);
return false;
};
...
});
編寫圖片查看器主函數
var base_module = (function(){
var base = {};
base.options = {
LOCK : false
};
base.fn = function(){
...
};
return base;
})();
按需加載swipe.js
/**
* 图片查看器
* @param object obj 操作对象
* @param object set 对象集
*/
base.dialog = function(obj, set){
var i = set.index(obj); //当前页索引
var rel = set.length; //所有项个数
var html = '<section class="dialog"><section></section><figure id="swipe"><ul>'; //开始绘制图片查看器
set.each(function(){
var url = $(this).attr('url'); //图片路径
html += '<li><img src="loading.gif" width="40" height="40" url="' + url + '" /></li>'; //循环绘制图片列表
});
html += '</ul></figure><footer><span id="po">' + (i + 1) + '/' + rel + '</span></footer></section>'; //绘制结束
$('body').append(html); //渲染图片查看器
//js文件加载状态
base.loadJs('swipe.min.js', function(){
base.swiper(i); //回调函数, swipe参数配置
});
var url = obj.attr('url');
//图片加载状态
base.loadImg(url, function(){
base.imager(i); //回调函数, 图片展示
});
};
設定swipe.js參數
/**
* 按需加载js
* @param string url 文件路径
* @param object fn 回调函数
*/
base.loadJs = function(url, fn){
if(typeof Swipe != 'undefined'){
if(fn) fn();
return false;
};
var js = document.createElement('script');
js.src = url;
document.getElementsByTagName('head')[0].appendChild(js);
js.onload = function(){
if(fn) fn();
};
};
隨選載入圖片
/**
* 幻灯片配置
* @param int i 当前页索引
*/
base.swiper = function(i){
var obj = document.getElementById('swipe');
window.mySwipe = Swipe(obj, {
startSlide : i,
continuous : false,
disableScroll : true,
callback : function(index, element){
var i = index + 1;
var s = $('#swipe li').length;
$('#po').text(i + '/' + s);
var url = $(element).find('img').attr('url');
base.loadImg(url, function(){
base.imager(index);
});
}
});
};
需優化完善，主要有以下幾點
圖片檢視器已繪製成功，關閉時不應該刪除而是隱藏；重新調用檢視器時，如圖片清單沒有變化則直接喚起而不必重新繪製；
圖片不能放大收縮，寬高度過長情況下，預覽效果會很差無法看清圖片；
沒有縮圖，開發時才發現我們存儲圖片時居然沒有壓縮處理圖形，加載圖片時流量太坑，當然這個問題本身首先要在後台存儲時處理。
