移动端js图片查看器
本文实例为大家分享了js图片查看器插件的使用方法，制作手机使用的网页图片查看器，供大家参考，具体内容如下
这几天抽空在为项目开发一个量身的图片查看器，目前已初步完成需求。
开发场景是：在一个多文件下载展示列表中，如检测某些文件为图片时，则点击该文件时打开图片查看器展示该图片，并将列表内其它图片同时展示查看器队列内，可供前后滑动查看及其它附带功能。
乍一听功能点似乎有点多而且有些复杂，需要梳理一下
功能点整理
首先，我们要获得点击的图片文件对象及符合条件的图片文件对象集
其次，图片查看器的制作及图片队列展示
然后，图片友好加载方式
最后，图片查看器触摸滑动及滑动后相关功能的实现
简单整理了一下，好像也不多
制作手机网页图片查看器
根据功能点为正式开发做好准备
首先：我们为已知列表容器内图片文件添加统一标识，文件是否为图片及图片路径我们在存储时已知，直接为元素添加统一属性
<aurl="..."></a>
其次：制作一个全屏灰色背景，展示图片队列，并以NO./n形式标注当前展示图片位置；所有样式全部给出，就不一一细说了（figure样式内部分属性为swipe.js必须）
.dialog,.dialogfigure{position:fixed;top:0;bottom:0;left:0;right:0;z-index:1001;}
.dialogsection{height:100%;background:#333;-webkit-opacity:0.7;}
.dialogfooter{padding:10px;position:absolute;bottom:0;left:0;right:0;z-index:1002;font-size:13px;}
.dialogfooterspan{padding:020px;float:right;border:1pxsolid#999;border-radius:15px;color:#ddd;}
.dialogfigure{overflow:hidden;}
.dialogfigureul{height:100%;overflow:hidden;}
.dialogfigureli{width:100%;height:100%;display:-webkit-box;float:left;position:relative;-webkit-box-pack:center;-webkit-box-align:center;}
.dialogfigureimg{max-width:100%;max-height:100%;margin:10px;}
然后：初始化时把图片直接换成loading.gif图片，然后动态加载
<imgsrc="loading.gif"url="..."/>
最后：swipe.js轻量级触摸滑动插件学习使用，先调用
varobj=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结构
<figureid="swipe"> <ul> <li></li> </ul> </figure>
必须的css属性
figure{overflow:hidden;position:relative;}
figureul{overflow:hidden;}
figureli{width:100%;float:left;position:relative;}
很无论体积还是文档都很轻巧，十分简单容易上手
swipe.min.js下载
完整开发正式开始
我们通过列表的统一触发事件，获取触发对象的url属性，如该属性存在则调用图片查看器并停止后面进入下载界面程序
$('.downloada').click(function(){
varobj=$(this);
varurl=obj.attr('url');
if(url&&url.length>0){
varset=$('.downloada[url]');
base_module.dialog(obj,set);
returnfalse;
};
...
});
现在进入数据收集完毕后加工处理环节，首先展示一下我们的对象模型，对象模型的属性及方法的定义规则
varbase_module=(function(){
varbase={};
base.options={
LOCK:false
};
base.fn=function(){
...
};
returnbase;
})();
编写图片查看器主函数
/**
*图片查看器
*@paramobjectobj操作对象
*@paramobjectset对象集
*/
base.dialog=function(obj,set){
vari=set.index(obj);//当前页索引
varrel=set.length;//所有项个数
varhtml='<sectionclass="dialog"><section></section><figureid="swipe"><ul>';//开始绘制图片查看器
set.each(function(){
varurl=$(this).attr('url');//图片路径
html+='<li><imgsrc="loading.gif"width="40"height="40"url="'+url+'"/></li>';//循环绘制图片列表
});
html+='</ul></figure><footer><spanid="po">'+(i+1)+'/'+rel+'</span></footer></section>';//绘制结束
$('body').append(html);//渲染图片查看器
//js文件加载状态
base.loadJs('swipe.min.js',function(){
base.swiper(i);//回调函数,swipe参数配置
});
varurl=obj.attr('url');
//图片加载状态
base.loadImg(url,function(){
base.imager(i);//回调函数,图片展示
});
};
按需加载swipe.js
/**
*按需加载js
*@paramstringurl文件路径
*@paramobjectfn回调函数
*/
base.loadJs=function(url,fn){
if(typeofSwipe!='undefined'){
if(fn)fn();
returnfalse;
};
varjs=document.createElement('script');
js.src=url;
document.getElementsByTagName('head')[0].appendChild(js);
js.onload=function(){
if(fn)fn();
};
};
配置swipe.js参数
/**
*幻灯片配置
*@paraminti当前页索引
*/
base.swiper=function(i){
varobj=document.getElementById('swipe');
window.mySwipe=Swipe(obj,{
startSlide:i,
continuous:false,
disableScroll:true,
callback:function(index,element){
vari=index+1;
vars=$('#swipeli').length;
$('#po').text(i+'/'+s);
varurl=$(element).find('img').attr('url');
base.loadImg(url,function(){
base.imager(index);
});
}
});
};
按需加载图片
/**
*按需加载img
*@paramstringurl文件路径
*@paramobjectfn回调函数
*/
base.loadImg=function(url,fn){
varimg=newImage();
img.src=url;
if(img.complete){
if(fn)fn();
returnfalse;
};
img.onload=function(){
if(fn)fn();
};
};
图片加载完成后展示
/**
*展示加载完图片
*@paraminti当前页索引
*/
base.imager=function(i){
varobj=$('#swipeli').eq(i).find('img');
varurl=obj.attr('url');
obj.replaceWith('<imgsrc="'+url+'"/>');
};
目前还只是初步完工，后面还需优化完善，主要有以下几点
图片查看器已绘制成功，关闭时不应该删除而是隐藏；重新调用查看器时，如图片列表没有变化则直接唤起而不必重新绘制；
图片不能放大收缩，宽高度过长情况下，预览效果会很差无法看清图片；
没有缩略图，开发时才发现我们存储图片时居然没有压缩处理图形，加载图片时流量太坑，当然这个问题本身首先要在后台存储时处理。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。