基于jQuery的一个简单的图片查看器
项目中自己diy了一个图片查看器。因为初始代码不是自己的，只是在上面改了一下也没有弄的很漂亮。等以后有时间了在重写一下样式和封装，作为备用的只是积累吧。如果有童鞋有用到，完全可以在此基础上改，比较容易，代码也比较简单
图片查看器主要有几个功能：
1.显示图片和图片信息（图片名称、发布者等等）
2.切换图片
3.关闭图片查看器
初始化接口函数pictureViewer.init: function(picInfos,tapNumber,isBig)
picInfos: 传入图片组信息，必须，格式如下
var picInfos = [
{
"url" : "default.png",
"data": [
{
"key":"名称:",
"value":"测试图片"
},
{
"key":"发布者：",
"value":"chua"
}
]
},
{
"url" : "test.jpeg",
"data": [
{
"key":"名称",
"value":"测试图片"
},
{
"key":"发布者：",
"value":"发大水发大水发顺风h"
},
{
"key":"这个图片的其他信息",
"value":"vsfsgsdgfds234323424"
}
]
},
...
] //传入参数的样式
tapNumber: 要显示的图片在图片列表中的索引，必须，从0开始
isBig：是否使用大图查看，默认是false，可选
html及css源码如下（后面有一个例子）
<!DOCTYPE html>
<html lang="ch-cn">
<head>
<meta charset="utf-8">
<script type="text/javascript" src='jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="imgTap.css">
<script type="text/javascript" src='imgTap.js'></script>
<style type="text/css">
html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
margin: 0;
padding:0;
}
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} body{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.imgTapDetail {
display: none;
position: absolute;
z-index: 2000;
top: 0;
width: 100%;
height: 100%;
background: none transparent scroll repeat 0% 0%;
color: #000 !important;
}
.page-secShadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
background-color: rgba(0,0,0,.3);
filter: alpha(opacity=50);
} .page-shadowContent {
width: 40%;
margin: 0 auto;
margin-top: 20%;
position: relative !important;
min-width: 400px;
}
.page-shadowContent.widget-big{ }
.leftTap, .rightTap {
margin-top: 50%;
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
top: -80px;
cursor: pointer;
}
.leftTap {
left: -30%;
background: url("imgTap.png") 0 0 no-repeat;
}
.rightTap {
right: -30%;
background: url("imgTap.png") -80px 0 no-repeat;
}
.closeTap {
width: 60px;
height: 60px;
border-radius: 50%;
position: absolute;
right: -30px;
top: -30px;
cursor: pointer;
background: url("imgTap.png") 0 -165px no-repeat;
z-index: 99;
}
.widget {
padding: 0 5px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin: 3px 0 10px 0;
}
.widget-body {
background-color: #fff;
-webkit-box-shadow: 1px 0 10px 1px rgba(0,0,0,.3);
-moz-box-shadow: 1px 0 10px 1px rgba(0,0,0,.3);
box-shadow: 1px 0 10px 1px rgba(0,0,0,.3);
padding: 12px;
}
.page-shadowContent .widget-body {
min-height: 200px;
padding: 15px!important;
border: 1px solid #ccc;
overflow: hidden;
}
.widget-body .row {
margin-right: -10px !important;
margin-left: -10px !important;
}
.imgShow {
text-align: center;
height: 400px;
padding-left: 10px;
padding-right: 10px;
/*background: url(default.png) center no-repeat;*/
}
#tapContent{
padding-left: 10px;
padding-right: 10px;
}
.imgContent {
max-width: 400px;
max-height: 400px;
vertical-align: middle;
}
.widget-body img {
max-width: 100%;
height: auto!important;
}
.imgShow > span {
height: 100%;
display: inline-block;
vertical-align: middle;
}
.imgTapDetail .form-group {
overflow: hidden;
margin-bottom: 0 !important;
position: relative;
min-height: 34px;
}
.widget-detail .form-group .detail-LabelStyle {
float: left;
padding-left: 5px;
/* max-width: 50%; */
text-align: left;
line-height: 34px!important;
color: rgb(115, 115, 115);
padding-right: 5px;
height: 34px;
overflow: hidden;
left: 0;
top: 0;
}
.widget-detail .form-group .detail-SpanStyle {
padding: 8px 0 6px 5px;
line-height: 20px;
width: auto;
height: auto!important;
min-height: 34px;
float: left;
/* margin-left: 80px; */
word-break: break-all;
}
.widget-big {
width: 80%;
min-width: 300px;
}
.widget-big .leftTap{
left: -10%;
}
.widget-big .rightTap{
right: -10%;
}
.widget-big .widget-detail{
padding: 40px 0;
}
.widget-big .imgShow{
min-height: 500px;
}
.widget-big .imgShow img{
max-width: 800px;
max-height: 550px;
}
</style>
</head>
<body >
<div class="imgTapDetail"></div>
<script type="text/javascript">
var picInfos = [
{
"url" : "default.png",
"data": [
{
"key":"名称:",
"value":"测试图片"
},
{
"key":"发布者：",
"value":"chua"
}
]
},
{
"url" : "test.jpeg",
"data": [
{
"key":"名称",
"value":"测试图片"
},
{
"key":"发布者：",
"value":"发大水发大水发顺风h"
},
{
"key":"这个图片的其他信息",
"value":"vsfsgsdgfds234323424"
}
]
}
]
pictureViewer.init(picInfos,0,true);
</script>
</html>
js的源码如下
pictureViewer = {
picInfos: [],
curPicIndex: 0,
isBig:false,//大图查看？默认为false。默认图片显示区域为window宽度的40%，大图为80%
imgTapSelector:".imgTapDetail",
init: function(picInfos,tapNumber,isBig){
var _this = this;
_this.picInfos = picInfos;
_this.curPicIndex = tapNumber;
_this.isBig = isBig;
tapImgInit();
//图片查看器初始化
function tapImgInit(){
//页面代码和事件只需要初始化一次即可
if(!_this.guid){
_this.guid = 1;
initTapImgHtml();
$(document).on("click","#rightTap",function(){
_this.curPicIndex++;
if(_this.curPicIndex == _this.picInfos.length){
_this.curPicIndex = 0;
}
$("#tapContent").html("")
tapImg()
}).on("click","#leftTap",function(){
_this.curPicIndex--;
if(_this.curPicIndex < 0){
_this.curPicIndex = _this.picInfos.length-1;
}
$("#tapContent").html("")
tapImg();
}).on("click","#closeTap",function(){
$(_this.imgTapSelector).hide("fast")
})
}
var offTop = top.document.body.scrollTop || top.document.documentElement.scrollTop;
$('#imgTapPanel').css("margin-top",_this.isBig?(offTop>30?offTop:30):offTop + 100)
tapImg();
$(_this.imgTapSelector).show("fast");
}
//初始化图片查看器的html代码
function initTapImgHtml(){
var $detailText = '<div class="page-secShadow" >'
+ '<div id="imgTapPanel" class="page-shadowContent '+(_this.isBig?"widget-big":"")+'">'
+ '<div id="leftTap" class="leftTap"></div>'
+ '<div id="rightTap" class="rightTap"></div>'
+ '<div id="closeTap" class="closeTap"></div>'
+ '<div class="widget row"><div class="widget-body">'
+ '<div class="widget-detail row">'
+ '<div class="imgShow">'
+ '<img src="logo.png" id="tapImg" class="imgContent"><span></span>'
+ '</div>'
+ '<div id="tapContent"></div>'
+ '</div></div></div></div></div>';
$(_this.imgTapSelector).html($detailText);
hoverButton("#leftTap", 0, 0, 0, "-80px");
hoverButton("#rightTap", "-80px", 0, "-80px", "-80px");
hoverButton("#closeTap", 0, "-165px", "-60px", "-165px");
}
//添加左右切换图标、关闭图标的hover响应事件。这个其实可以起到css中更好一些
function hoverButton(id, x, y, A, B){
$(id).hover(function(){
$(this).css('background-position', A + ' '+ B)
},function(){
$(this).css('background-position', x + ' '+ y)
})
}
//刷新当前图片及图片信息
function tapImg(){
var reg = /[:：]$/,
leftTap = $("#leftTap"),
rightTap = $("#rightTap"),
imgTap = $("#tapImg"),
contentTap = $("#tapContent");
leftTap.css("display","block");
rightTap.css("display","block");
if(_this.picInfos.length == 1){
leftTap.css("display","none");
rightTap.css("display","none");
}
imgTap.attr("src",_this.picInfos[_this.curPicIndex].url);
var data = _this.picInfos[_this.curPicIndex].data,
dataLength = data.length,
$text = "";
for(var i=0; i<dataLength; i++){
$text += '<div class="form-group">'
+ '<label class="detail-LabelStyle">'+data[i].key.replace(reg,"")+'：</label>'
+ '<span id="spanLoginName" class="detail-SpanStyle">'+data[i].value+'</span>'
+ '</div>';
};
contentTap.empty().append($text);
setTimeout(function(){
if(_this.isBig && imgTap.height() > 400){
imgTap.parent().attr("style","height:inherit");
}else{
imgTap.parent().removeAttr("style");
}
},1);
}
}
}
css中用到的切图imgTap.png为下面的图片
测试例子pictureViewer.init(picInfos,0,true);的效果图如下
测试例子pictureViewer.init(picInfos,0,false);的效果图如下
这是一个比较粗糙的图片查看器，改起来也比较方便。后期如果有时间本人重写一下。
如果觉得本文不错，请点击右下方【推荐】！
基于jQuery的一个简单的图片查看器的更多相关文章
- Objective-C ,ios,iphone开发基础:快速实现一个简单的图片查看器
新建一个single view 工程: 关闭ARC , 在.xib视图文件上拖放一个UIImageView 两个UIButton ,一个UISlider ,布局如图. 并为他们连线, UIImage ...
- iOS开发-简单的图片查看器
现在你只要拿着手机,不管你Android还是iOS,新闻类的App不可避免都有一个功能就是图片查看,做个专题,查看一下内容,App Store中也有专门针对图片浏览的App,鉴于目前所知有限,无法做到 ...
- wpf图片查看器，支持鼠标滚动缩放拖拽
最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class=&qu ...
- 基于 jQuery 实现的精致作品集图片导航效果
今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示 ...
- jQuery功能强大的图片查看器插件
简要教程 viewer是一款功能强大的图片查看器jQuery插件.它可以实现ACDsee等看图软件的部分功能.它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片.该图片查看器还支持移动设备, ...
- Viewer.js – 强大的JS/jQuery图片查看器
简介 Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Viewer.js 有以下特点: ...
- Expression Blend4经验分享：制作一个简单的图片按钮样式
这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.6.gwidc.com/Iphone/de ...
- 基于jQuery商城网站全屏图片切换代码
基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="slid ...
- 基于jQuery功能非常强大的图片裁剪插件
今天我们要来介绍一款基于jQuery功能非常强大的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠 ...
随机推荐
- asp.net导出dbf报错“未在本地计算机上注册“VFPOLEDB”提供程序。”
导出dbf文件报错,提示“未在本地计算机上注册“VFPOLEDB”提供程序.” 可以尝试一下方法: 方法一:下载VFPOLEDBSetup.msi 安装 如果方法一不行:继续方法二:下载vfp9.0 ...
- javascript定时函数
setTimeout(表达式,延迟时间)是定时程序,也就是在什么时间以后干什么,只做一次,就不做了.表达式为字符串函数或其它表达式,时间单位为毫秒 例子:setTimeout("f()&qu ...
- entityframework使用oracle的几个小问题
问题一:Operation is not valid due to the current state of the object 生成的edmx文件有问题,解决方法参考链接 问题二:InvalidO ...
- 海量用户-高并发SAAS产品测试上线流程
海量用户高并发SAAS产品测试上线流程 SAAS产品测试上线流程-以Web插件产品为例子 1 概述 在互联网产品中,IT公司之间更加注重产品功能之间的协作,SAAS形态的产品扮演着越来越重要的作用 ...
- 作业三（代码规范、代码复审、PSP）
1.代码规范: 我支持代码要有规范,理由如下. (1).艺术是一个很带有个人风格的学科,天马行空才能凸显出自己的价值.但不要忘了,会艺术的不是生下来就会艺术, 他也需要按照前辈的步骤一步一步的学习基础 ...
- git 合并分支
当前git有PreRelease和Release两个分支,现在需要将前者合并到后者. Clone版本 在本地clone一个目标工程. 然后右键 Tortoise-->Switch/Checkou ...
- Java提高篇（二六）-----hashCode
在前面三篇博文中LZ讲解了(HashMap.HashSet.HashTable),在其中LZ不断地讲解他们的put和get方法,在这两个方法中计算key的hashCode应该是最重要也是最 ...
- ASP.NET-自定义HttpModule与HttpHandler
在之前的ASP.NET是如何在IIS下工作的这篇文章中介绍了ASP.NET与IIS配合工作的机制,在http请求经过一系列处理后,最后到达ASP.NET管道中,这时,就是Http Modules和Ht ...
- WAMPServer 默认安装启动后，图标显示橙黄色
说明:我是在家的电脑上面学习的WAMPServer的,而家的电脑很干净.这次来学校以后,实验室的电脑被我经常的折磨,今天在安装以后,启动后,发现图标有红色到黄色,就停止了.其实,问题的根源很简单,某个 ...
- Properties
java.util 类 Properties 因为 Properties 继承于 Hashtable,所以可对 Properties 对象应用 put 和 putAll 方法.但强烈反对使用这两个方法 ...