項目中自己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程序設計有所幫助。
新聞熱點
疑難解答
