移动端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 parseInt与Number函数的区别
Jan 21 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
Vue页面骨架屏注入方法
May 13 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
jquery图片上下tab切换效果
2011/03/18 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
python实现SMTP邮件发送功能
2020/06/16 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
C语言50道问题
2014/10/23 面试题
《毛主席在花山》教学反思
2014/04/20 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript