移動(dòng)端js圖片查看器
本文實(shí)例為大家分享了js圖片查看器插件的使用方法,制作手機(jī)使用的網(wǎng)頁(yè)圖片查看器,供大家參考,具體內(nèi)容如下
這幾天抽空在為項(xiàng)目開(kāi)發(fā)一個(gè)量身的圖片查看器,目前已初步完成需求。
開(kāi)發(fā)場(chǎng)景是:在一個(gè)多文件下載展示列表中,如檢測(cè)某些文件為圖片時(shí),則點(diǎn)擊該文件時(shí)打開(kāi)圖片查看器展示該圖片,并將列表內(nèi)其它圖片同時(shí)展示查看器隊(duì)列內(nèi),可供前后滑動(dòng)查看及其它附帶功能。
乍一聽(tīng)功能點(diǎn)似乎有點(diǎn)多而且有些復(fù)雜,需要梳理一下
功能點(diǎn)整理
首先,我們要獲得點(diǎn)擊的圖片文件對(duì)象及符合條件的圖片文件對(duì)象集
其次,圖片查看器的制作及圖片隊(duì)列展示
然后,圖片友好加載方式
最后,圖片查看器觸摸滑動(dòng)及滑動(dòng)后相關(guān)功能的實(shí)現(xiàn)
簡(jiǎn)單整理了一下,好像也不多
制作手機(jī)網(wǎng)頁(yè)圖片查看器
根據(jù)功能點(diǎn)為正式開(kāi)發(fā)做好準(zhǔn)備
首先:我們?yōu)橐阎斜砣萜鲀?nèi)圖片文件添加統(tǒng)一標(biāo)識(shí),文件是否為圖片及圖片路徑我們?cè)诖鎯?chǔ)時(shí)已知,直接為元素添加統(tǒng)一屬性
<a url="..."></a>
其次:制作一個(gè)全屏灰色背景,展示圖片隊(duì)列,并以NO./n形式標(biāo)注當(dāng)前展示圖片位置;所有樣式全部給出,就不一一細(xì)說(shuō)了(figure樣式內(nèi)部分屬性為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;}
然后:初始化時(shí)把圖片直接換成loading.gif圖片,然后動(dòng)態(tài)加載
<img src="loading.gif" url="..." />
最后:swipe.js輕量級(jí)觸摸滑動(dòng)插件學(xué)習(xí)使用,先調(diào)用
var obj = document.getElementById('swipe');
window.mySwipe = Swipe(obj, {
...
});
配置參數(shù)
startSlide : 0, //起始位置
auto : 3000, //自動(dòng)播放時(shí)間
continuous : true, //無(wú)限循環(huán); 個(gè)人建議所有項(xiàng)個(gè)數(shù)不確定時(shí)賦值false, 不然為2的時(shí)候很2
disableScroll : false, //觸摸時(shí)禁止?jié)L屏
callback : function(index, element){}, //滑動(dòng)時(shí)回調(diào)函數(shù), 參數(shù)為滑動(dòng)元素排序與對(duì)象
transitionEnd : function(index, element){} //滑動(dòng)完成后回調(diào)函數(shù), 參數(shù)同上
API方法
prev(); //上一頁(yè) next(); //下一頁(yè) getPos(); //當(dāng)前頁(yè)索引 getNumSlides(); //所有項(xiàng)個(gè)數(shù) slide(index, duration); //滑動(dòng)效果
基本html結(jié)構(gòu)
<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;}
很無(wú)論體積還是文檔都很輕巧,十分簡(jiǎn)單容易上手
完整開(kāi)發(fā)正式開(kāi)始
我們通過(guò)列表的統(tǒng)一觸發(fā)事件,獲取觸發(fā)對(duì)象的url屬性,如該屬性存在則調(diào)用圖片查看器并停止后面進(jìn)入下載界面程序
$('.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;
};
...
});
現(xiàn)在進(jìn)入數(shù)據(jù)收集完畢后加工處理環(huán)節(jié),首先展示一下我們的對(duì)象模型,對(duì)象模型的屬性及方法的定義規(guī)則
var base_module = (function(){
var base = {};
base.options = {
LOCK : false
};
base.fn = function(){
...
};
return base;
})();
編寫圖片查看器主函數(shù)
/**
* 圖片查看器
* @param object obj 操作對(duì)象
* @param object set 對(duì)象集
*/
base.dialog = function(obj, set){
var i = set.index(obj); //當(dāng)前頁(yè)索引
var rel = set.length; //所有項(xiàng)個(gè)數(shù)
var html = '<section class="dialog"><section></section><figure id="swipe"><ul>'; //開(kāi)始繪制圖片查看器
set.each(function(){
var url = $(this).attr('url'); //圖片路徑
html += '<li><img src="loading.gif" width="40" height="40" url="' + url + '" /></li>'; //循環(huán)繪制圖片列表
});
html += '</ul></figure><footer><span id="po">' + (i + 1) + '/' + rel + '</span></footer></section>'; //繪制結(jié)束
$('body').append(html); //渲染圖片查看器
//js文件加載狀態(tài)
base.loadJs('swipe.min.js', function(){
base.swiper(i); //回調(diào)函數(shù), swipe參數(shù)配置
});
var url = obj.attr('url');
//圖片加載狀態(tài)
base.loadImg(url, function(){
base.imager(i); //回調(diào)函數(shù), 圖片展示
});
};
按需加載swipe.js
/**
* 按需加載js
* @param string url 文件路徑
* @param object fn 回調(diào)函數(shù)
*/
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參數(shù)
/**
* 幻燈片配置
* @param int i 當(dāng)前頁(yè)索引
*/
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 回調(diào)函數(shù)
*/
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 當(dāng)前頁(yè)索引
*/
base.imager = function(i){
var obj = $('#swipe li').eq(i).find('img');
var url = obj.attr('url');
obj.replaceWith('<img src="' + url + '" />');
};
目前還只是初步完工,后面還需優(yōu)化完善,主要有以下幾點(diǎn)
圖片查看器已繪制成功,關(guān)閉時(shí)不應(yīng)該刪除而是隱藏;重新調(diào)用查看器時(shí),如圖片列表沒(méi)有變化則直接喚起而不必重新繪制;
圖片不能放大收縮,寬高度過(guò)長(zhǎng)情況下,預(yù)覽效果會(huì)很差無(wú)法看清圖片;
沒(méi)有縮略圖,開(kāi)發(fā)時(shí)才發(fā)現(xiàn)我們存儲(chǔ)圖片時(shí)居然沒(méi)有壓縮處理圖形,加載圖片時(shí)流量太坑,當(dāng)然這個(gè)問(wèn)題本身首先要在后臺(tái)存儲(chǔ)時(shí)處理。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)獲取鼠標(biāo)當(dāng)前的位置
本文主要介紹了利用javascript實(shí)現(xiàn)獲取鼠標(biāo)當(dāng)前的位置的具體方法,具有很好的參考作用,需要的朋友可以看看2016-12-12
webpack打包后直接訪問(wèn)頁(yè)面圖片路徑錯(cuò)誤的解決方法
這篇文章主要給大家介紹了在webpack打包后直接訪問(wèn)頁(yè)面圖片路徑錯(cuò)誤的解決方法,文中介紹的非常詳細(xì),對(duì)遇到這個(gè)問(wèn)題的朋友們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-06-06
一個(gè)簡(jiǎn)單不報(bào)錯(cuò)的summernote 圖片上傳案例
下面小編就為大家?guī)?lái)一篇一個(gè)簡(jiǎn)單不報(bào)錯(cuò)的summernote圖片上傳案例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
微信小程序tab左右滑動(dòng)切換功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序tab左右滑動(dòng)切換功能的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-02
JavaScript中window.showModalDialog()用法詳解

