本文实例为大家分享了js图片查看器插件的使用方法,制作手机使用的网页图片查看器,供大家参考,具体内容如下
这几天抽空在为项目开发一个量身的图片查看器,目前已初步完成需求。
开发场景是:在一个多文件下载展示列表中,如检测某些文件为图片时,则点击该文件时打开图片查看器展示该图片,并将列表内其它图片同时展示查看器队列内,可供前后滑动查看及其它附带功能。
乍一听功能点似乎有点多而且有些复杂,需要梳理一下
功能点整理
首先,我们要获得点击的图片文件对象及符合条件的图片文件对象集
然后,图片友好加载方式
简单整理了一下,好像也不多
制作手机网页图片查看器
根据功能点为正式开发做好准备
首先:我们为已知列表容器内图片文件添加统一标识,文件是否为图片及图片路径我们在存储时已知,直接为元素添加统一属性
其次:制作一个全屏灰色背景,展示图片队列,并以NO./n形式标注当前展示图片位置;所有样式全部给出,就不一一细说了(figure样式内部分属性为swipe.js必须)
.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图片,然后动态加载
最后:swipe.js轻量级触摸滑动插件学习使用,先调用
配置参数
API方法
基本html结构
必须的css属性
很无论体积还是文档都很轻巧,十分简单容易上手
完整开发正式开始
我们通过列表的统一触发事件,获取触发对象的url属性,如该属性存在则调用图片查看器并停止后面进入下载界面程序
...
});
现在进入数据收集完毕后加工处理环节,首先展示一下我们的对象模型,对象模型的属性及方法的定义规则
base.fn = function(){
...
};
return base;
})();
- '; //开始绘制图片查看器
set.each(function(){
var url = $(this).attr('url'); //图片路径
html += ''; //循环绘制图片列表
});
html += '
$('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
var js = document.createElement('script');
js.src = url;
document.getElementsByTagName('head')[0].appendChild(js);
js.onload = function(){
if(fn) fn();
};
};
配置swipe.js参数
var url = $(element).find('img').attr('url');
base.loadImg(url,function(){
base.imager(index);
});
}
});
};
按需加载图片
img.onload = function(){
if(fn) fn();
};
};
图片加载完成后展示
目前还只是初步完工,后面还需
优化完善
,主要有以下几点图片查看器已绘制成功,关闭时不应该删除而是隐藏;重新调用查看器时,如图片列表没有变化则直接唤起而不必重新绘制;
图片不能放大收缩,宽高度过长情况下,预览效果会很差无法看清图片;
没有缩略图,开发时才发现我们存储图片时居然没有压缩处理图形,加载图片时流量太坑,当然这个问题本身首先要在后台存储时处理。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/js/44404.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。