本文實例為大家分享了js圖片查看器插件的使用方法,制作手機使用的網頁圖片查看器,供大家參考,具體內容如下
這幾天抽空在為項目開發一個量身的圖片查看器,目前已初步完成需求。
開發場景是:在一個多文件下載展示列表中,如檢測某些文件為圖片時,則點擊該文件時打開圖片查看器展示該圖片,並將列表內其它圖片同時展示查看器隊列內,可供前後滑動查看及其它附帶功能。
乍一聽功能點似乎有點多而且有些復雜,需要梳理一下
功能點整理
首先,我們要獲得點擊的圖片文件對象及符合條件的圖片文件對象集
其次,圖片查看器的制作及圖片隊列展示
然後,圖片友好加載方式
最後,圖片查看器觸摸滑動及滑動後相關功能的實現
簡單整理了一下,好像也不多
制作手機網頁圖片查看器
根據功能點為正式開發做好准備
首先:我們為已知列表容器內圖片文件添加統一標識,文件是否為圖片及圖片路徑我們在存儲時已知,直接為元素添加統一屬性
<a url="..."></a>
其次:制作一個全屏灰色背景,展示圖片隊列,並以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圖片,然後動態加載
<img src="loading.gif" url="..." />
最後: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){} //滑動完成後回調函數, 參數同上
API方法
prev(); //上一頁 next(); //下一頁 getPos(); //當前頁索引 getNumSlides(); //所有項個數 slide(index, duration); //滑動效果
基本html結構
<figure id="swipe"> <ul> <li></li> </ul> </figure>
必須的css屬性
figure{overflow:hidden;position:relative;} figure ul{overflow:hidden;} figure li{width:100%;float:left;position:relative;}
很無論體積還是文檔都很輕巧,十分簡單容易上手
swipe.min.js下載
完整開發正式開始
我們通過列表的統一觸發事件,獲取觸發對象的url屬性,如該屬性存在則調用圖片查看器並停止後面進入下載界面程序
$('.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; })();
編寫圖片查看器主函數
/** * 圖片查看器 * @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(); }; };
配置swipe.js參數
/** * 幻燈片配置 * @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); }); } }); };
按需加載圖片
/** * 按需加載img * @param string url 文件路徑 * @param object fn 回調函數 */ base.loadImg = function(url, fn){ var img = new Image(); img.src = url; if(img.complete){ if(fn) fn(); return false; }; img.onload = function(){ if(fn) fn(); }; };
圖片加載完成後展示
/** * 展示加載完圖片 * @param int i 當前頁索引 */ base.imager = function(i){ var obj = $('#swipe li').eq(i).find('img'); var url = obj.attr('url'); obj.replaceWith('<img src="' + url + '" />'); };
目前還只是初步完工,後面還需優化完善,主要有以下幾點
圖片查看器已繪制成功,關閉時不應該刪除而是隱藏;重新調用查看器時,如圖片列表沒有變化則直接喚起而不必重新繪制;
圖片不能放大收縮,寬高度過長情況下,預覽效果會很差無法看清圖片;
沒有縮略圖,開發時才發現我們存儲圖片時居然沒有壓縮處理圖形,加載圖片時流量太坑,當然這個問題本身首先要在後台存儲時處理。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。