移动端js图片查看器


Posted in Javascript onNovember 17, 2016

本文实例为大家分享了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;}

很无论体积还是文档都很轻巧,十分简单容易上手

完整开发正式开始

我们通过列表的统一触发事件,获取触发对象的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 + '" />');
};

目前还只是初步完工,后面还需优化完善,主要有以下几点

图片查看器已绘制成功,关闭时不应该删除而是隐藏;重新调用查看器时,如图片列表没有变化则直接唤起而不必重新绘制;

图片不能放大收缩,宽高度过长情况下,预览效果会很差无法看清图片;

没有缩略图,开发时才发现我们存储图片时居然没有压缩处理图形,加载图片时流量太坑,当然这个问题本身首先要在后台存储时处理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
js判断变量是否空值的代码
Oct 26 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 #Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 #Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 #Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 #Javascript
用Vue.js实现监听属性的变化
Nov 17 #Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 #Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 #Javascript
You might like
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
python复制文件到指定目录的实例
2018/04/27 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
Python爬取梨视频的示例
2021/01/29 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
酒店总经理欢迎词
2014/01/15 职场文书
综合实践活动方案
2014/02/14 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
优秀党员事迹材料
2014/12/18 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫
python游戏开发Pygame框架
2022/04/22 Python