首页 > 代码库 > 制作手机使用的网页图片查看器
制作手机使用的网页图片查看器
这几天抽空在为项目开发一个量身的图片查看器，目前已初步完成需求
开发场景是：在一个多文件下载展示列表中，如检测某些文件为图片时，则点击该文件时打开图片查看器展示该图片，并将列表内其它图片同时展示查看器队列内，可供前后滑动查看及其它附带功能
乍一听功能点似乎有点多而且有些复杂，需要梳理一下
功能点整理
首先，我们要获得点击的图片文件对象及符合条件的图片文件对象集
其次，图片查看器的制作及图片队列展示
然后，图片友好加载方式
最后，图片查看器触摸滑动及滑动后相关功能的实现
简单整理了一下，好像也不多
制作手机网页图片查看器
根据功能点为正式开发做好准备
首先：我们为已知列表容器内图片文件添加统一标识，文件是否为图片及图片路径我们在存储时已知，直接为元素添加统一属性
<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:15px;line-height:30px;}.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%;padding:10px;display:-webkit-box;float:left;position:relative;-webkit-box-pack:center;-webkit-box-align:center;}.dialog figure img{max-width:100%;width:40px;max-height:100%;height:40px;}
然后：初始化时把图片直接换成loading.gif图片，然后动态加载
<img src="loading.gif" url="..." />
最后：swipe.js轻量级触摸滑动插件学习使用，先调用
var obj = document.getElementById(‘swipe‘);window.mySwipe = Swipe(obj, { ...});
配置参数
startSlide : 0, //起始位置auto : 3000, //自动播放时间continuous : true, //无限循环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.picture(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.picture = 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="http://www.mamicode.com/loading.gif" url="‘ + url + ‘" /></li>‘; //循环绘制图片列表 }); html += ‘</ul></figure><footer><span id="seat" rel="‘ + rel + ‘">‘ + (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.setAttribute(‘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, disableScroll : true, callback : function(index, element){ var obj = $(‘#seat‘); var i = index + 1; var rel = obj.attr(‘rel‘); obj.text(i + ‘/‘ + rel); 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.attr(‘src‘, url).css({‘width‘:‘auto‘, ‘height‘:‘auto‘});};
目前还只是初步完工，后面还需优化完善，主要有以下几点
图片查看器已绘制成功，关闭时不应该删除而是隐藏；重新调用查看器时，如图片列表没有变化则直接唤起而不必重新绘制
图片不能放大收缩，宽高度过长情况下，预览效果会很差无法看清图片
开发时才发现我们存储图片时居然没有压缩处理图形，加载图片时流量太坑，当然这个问题首先要从后台处理
图片需要保存到手机相册，但网页在该情况下似乎不能完成，需要项目接口支持
swipe.js插件的bug
这几个坑后面我会一一填上
制作手机使用的网页图片查看器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。