移动端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 HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
js 刷新页面的代码小结 推荐
Apr 02 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
jquery选择器使用详解
Apr 08 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
如何基于Python按行合并两个txt
2020/11/03 Python
python中使用np.delete()的实例方法
2021/02/01 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
监理员的岗位职责
2013/11/13 职场文书
财务信息服务专业自荐书范文
2014/02/08 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
初中体育教学随笔
2015/08/15 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis