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）;} }}

希望本文所述对大家学习javascript程序设计有所帮助。