現在就職於一家P2P平台，自然也會關注同行其它網站的前端技術，今天要仿造的是禮德內頁的一個圖片查看器效果。不過說白了，無論人人貸也好禮德財富也好，很多地方的前端都做的不盡如人意，比如忽略細節、缺乏交互、濫用插件，像今天要仿造的圖片查看器，禮德財富也是直接套用的一款叫fancybox的插件：
個人覺得一名合格的前端還是要少用外部插件，減少代碼冗余，也方便自己維護（畢竟自己的代碼自己一清二楚）。
今天咱用JQ來做個屬於我們自己的圖片查看器，剛好我項目也要用到。
還是老樣子，大家可以到我的Github上下載本章的源文件查看效果。
原理
個人感覺到也沒啥特別的原理好說明，凡涉及動畫的，基本都是animate left/top來解決。但這個插件的制作可以說是略為繁瑣，制作的過程中也遇到了幾個bug，還是需要有點耐心來應對。
本例需要有一個全局變量來保存索引，左右切圖是靠這個變量來確定要切到哪一張圖的。
展示時，圖片上的左右倆箭頭不外乎是后續添加上去的<a>標簽，寬度均設為30%，默認看不到，鼠標移上去才顯示出來。
切圖時，通過索引加減值來獲取要切入的新圖索引，然后繪制新圖並淡入，舊圖animate並淡出后remove掉，減少文檔碎片。
上述提到的bug，主要是remove JQ對象時，要一個一個具體地remove掉，比如
$A.add($B).add($C).remove();
才能徹底清除掉，如果寫做
$BF.nextAll().remove(); //$BF是$A、$B、$C前一個元素 //或者 $PARRENT.empty();//$PARRENT是包裹住$A、$B、$C的父元素
會導致切圖的時候，按理應該成功被清除掉的舊圖卻重復顯示出來。
頁面原型
我們先把頁面原型做出來，讓縮略圖能通過上方的按鈕正常切換，這塊主要還是對css部分要求比較多：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>picBox</title> <script src="jquery-1.11.1.js"></script> <style> .wrap{width: 350px;height: 500px;border: solid 1px gray;overflow:hidden;} h1{ margin-bottom:0px;text-align:right; border-bottom:solid 1px #CCCCCC;} h1 a:hover,.pic_box a:hover{color:blue; cursor:pointer;} .right_btn{margin:0px 20px;} .pic_wrap{padding:0px 15px; width:320px; height:430px;} .pic_box{ float:left; margin:10px 0px;width:150px; height:200px; text-align:center;} .pic_box a{display:block;width:150px; height:180px; overflow:hidden;} .pic_box h6{margin:0px;} .nomoe{opacity:0.3}; </style> <script type="text/javascript"> $(function(){ var index,nums,page=0,shows=4,temp; //默認一頁顯示4張圖 var $show_picBox; var $left_btn = $("a:first","h1"); var $right_btn = $("a:last","h1"); var $picBox = $("div","#pic_wrap"); var page_count = Math.ceil($picBox.length/shows); //獲取頁數 var $a = $("#pic_wrap a"); var $imgs = $picBox.find("img"); var $title = $picBox.find("h6"); temp=shows-1; $picBox.filter("div:odd").css({"margin-left":"20px"}).end().filter("div:gt("+temp+")").hide(); $left_btn.addClass("nomoe"); //默認添加nomore類，表示左按鈕不能按、左翻頁已到底 if(page_count<=1) $right_btn.addClass("nomoe"); $left_btn.click(function(){ //左按鈕 if(page-1>=0){ --page; $right_btn.removeClass("nomoe"); nums = page*shows-1; nums=nums<0?0:nums; temp = (page+1)*shows; $show_picBox = $picBox.filter("div:lt("+temp+")").filter("div:gt("+nums+")").show(); $picBox.not($show_picBox).hide(); if(nums==0) $picBox.eq(0).show(); if(!page) $left_btn.addClass("nomoe"); //左翻頁已到底,左按鈕不能按 } }) $right_btn.click(function(){ //右按鈕 if(page+1<page_count){ ++page; $left_btn.removeClass("nomoe"); nums = page*shows-1; temp = (page+1)*shows; $show_picBox = $picBox.filter("div:lt("+temp+")").filter("div:gt("+nums+")").show(); $picBox.not($show_picBox).hide(); console.log(page+" "+page_count); if(page>=page_count-1) $right_btn.addClass("nomoe"); //右翻頁已到底,右按鈕不能按 } }) }) </script> </head> <body> <div class="wrap"> <h1> <a class="left_btn"><</a><a class="right_btn">></a> </h1> <div class="pic_wrap" id="pic_wrap"> <div class="pic_box"> <a><img src="img/1.jpg" /></a> <h6>圖片1</h6> </div> <div class="pic_box"> <a><img src="img/2.jpg" /></a> <h6>圖片2</h6> </div> <div class="pic_box"> <a><img src="img/3.jpg" /></a> <h6>圖片3</h6> </div> <div class="pic_box"> <a><img src="img/4.jpg" /></a> <h6>圖片4</h6> </div> <div class="pic_box"> <a><img src="img/5.jpg" /></a> <h6>圖片5</h6> </div> <div class="pic_box"> <a><img src="img/6.jpg" /></a> <h6>圖片6</h6> </div> <div class="pic_box"> <a><img src="img/7.jpg" /></a> <h6>圖片7</h6> </div> <div class="pic_box"> <a><img src="img/8.jpg" /></a> <h6>圖片8</h6> </div> <div class="pic_box"> <a><img src="img/9.jpg" /></a> <h6>圖片9</h6> </div> <div class="pic_box"> <a><img src="img/10.jpg" /></a> <h6>圖片10</h6> </div> </div> </div> <!--wrap結束--> </body> </html>
此時效果如下：
模態窗口
我們通過點擊小圖片，可以獲取圖片的索引並存到變量index中，從而獲取到圖片地址及其對應的描述文本，然后寫入到模態窗口里，如果你研究過vajoyJS的源碼，那對模態窗口的原理肯定不陌生，不外乎是把要顯示的內容（居中到屏幕中間）和半透明黑色div一起append到<body>標簽去。
相比之下，對“要顯示的內容”的處理就棘手多了。我是將它們生成為文檔碎片后，按順序一個個append到<body>中，通過樣式來控制布局（代碼里不使用addClass而是直接定義.css({...})的原因是后期封裝為插件的話，用起來無需再去寫太多樣式）。
另外一個細節就是要考慮圖片太大，大過瀏覽器可視窗口，則應該壓縮其大小（fixPic方法）：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>picBox</title> <script src="jquery-1.11.1.js"></script> <style> html,body{min-height:100%;} .wrap{width: 350px;height: 500px;border: solid 1px gray;overflow:hidden;} h1{ margin-bottom:0px;text-align:right; border-bottom:solid 1px #CCCCCC;} h1 a:hover,.pic_box a:hover{color:blue; cursor:pointer;} .right_btn{margin:0px 20px;} .pic_wrap{padding:0px 15px; width:320px; height:430px;} .pic_box{ float:left; margin:10px 0px;width:150px; height:200px; text-align:center;} .pic_box a{display:block;width:150px; height:180px; overflow:hidden;} .pic_box h6{margin:0px;} .nomoe{opacity:0.3;} .close_btn{width:15px;height:15px;text-align:center;padding:20px;background:black;color:white;border-radius:30px;cursor:pointer;font-family:"Arial";opacity:0.8;font-weight:bold;} .close_btn:hover{opacity:1;} </style> <script type="text/javascript"> $(function(){ var index,nums,page=0,shows=4,temp; var $show_picBox,$black_modalback,$click_img,$title,$close,$title_wrap,$show_wrap,pic_w,pic_h; var $left_btn = $("a:first","h1"); var $right_btn = $("a:last","h1"); var $picBox = $("div","#pic_wrap"); var page_count = Math.ceil($picBox.length/shows); var $a = $("#pic_wrap a"); var $imgs = $picBox.find("img"); var $titleH6 = $picBox.find("h6"); temp=shows-1; $picBox.filter("div:odd").css({"margin-left":"20px"}).end().filter("div:gt("+temp+")").hide(); $left_btn.addClass("nomoe"); if(page_count<=1) $right_btn.addClass("nomoe"); $left_btn.click(function(){ if(page-1>=0){ --page; $right_btn.removeClass("nomoe"); nums = page*shows-1; nums=nums<0?0:nums; temp = (page+1)*shows; $show_picBox = $picBox.filter("div:lt("+temp+")").filter("div:gt("+nums+")").show(); $picBox.not($show_picBox).hide(); if(nums==0) $picBox.eq(0).show(); if(!page) $left_btn.addClass("nomoe"); } }) $right_btn.click(function(){ if(page+1<page_count){ ++page; $left_btn.removeClass("nomoe"); nums = page*shows-1; temp = (page+1)*shows; $show_picBox = $picBox.filter("div:lt("+temp+")").filter("div:gt("+nums+")").show(); $picBox.not($show_picBox).hide(); if(page>=page_count-1) $right_btn.addClass("nomoe"); } }) //獲取窗口大小復用 var VJ_getWin = function(){ var $win = $(window); return { h:$win.height(), w:$win.width(), t:$win.scrollTop(), l:$win.scrollLeft() } } //獲取頁面可視區域高度復用 var VJ_getBH = function(){ return Math.max($("body").height(),$("html").height()); } //居中模塊 var VJ_stayCenter = function(obj,padding){ if(!padding) padding = 0; var o_l = VJ_getWin().w/2 -padding + VJ_getWin().l; var o_h = VJ_getWin().h/2 -padding + VJ_getWin().t; var obj_w = -obj.width()/2; var obj_h = -obj.height()/2; obj.css({"left":o_l,"margin-left":obj_w, "top":o_h,"margin-top":obj_h}); } //修改圖片大小，注意得作為文檔而非碎片時才能獲取其大小 var fixPic = function(obj){ pic_w = obj.width(); pic_h = obj.height(); var win_w = VJ_getWin().w, win_h = VJ_getWin().h; if(pic_h>win_h*0.85){ obj.css("height",win_h*0.85); } if(obj.width()>win_w*0.9){ obj.css({"height":"auto","width":win_w*0.9}); } } //繪制圖片 var drawPic = function(index){ $click_img = $imgs.eq(index).clone(); $title = $("<span>"+$titleH6.eq(index).text()+"</span>"); $close = $("<a title='關閉'>X</a>"); $click_img.css({"position":"relative","padding":"15px","background":"white","z-index":1002,"display":"none"}); $close.css({"position":"absolute","z-index":1003,"display":"none","top":"-16px","right":"-16px"}).addClass("close_btn"); $title.css({"position":"relative","padding":"5px 15px","background":"black","color":"white","z-index":1002,"display":"none","border-radius":"6px"}); $("body").append($close).append($click_img).append($title).append($show_wrap); fixPic($click_img); } $a.click(function(){ index = $(this).index("#pic_wrap a"); $black_modalback = $("<div></div>").css({"position":"absolute","width":"100%","height":VJ_getBH(),"background":"black","opacity":"0.6","left":"0","top":"0","z-index":1001,"display":"none"}); $("body").append($black_modalback); drawPic(index); //把全部元素包裹到一個div中 $show_wrap = $("<div></div>").css({"position":"absolute","width":$click_img.width()+30,"height":$click_img.height()+30}); $click_img.add($close).add($title).wrapAll($show_wrap); //title再包一層，以便居中 $title_wrap = $("<h5></h5>").css({"text-align":"center","margin":"5px 0 0 0"}); $title.wrapAll($title_wrap); //$show_wrap居中 $show_wrap = $click_img.closest("div"); //到這里會失效，得重新獲取 VJ_stayCenter($show_wrap,15); //顯示出來 $click_img.add($close).add($title).add($black_modalback).fadeIn(); //關閉按鈕 $close.click(function(){ $close.add($click_img).add($title).add($show_wrap).remove(); //一定要加上這一行才能刪除徹底 $black_modalback.nextAll().andSelf().remove(); }) }) }) </script> </head> <body> <div class="wrap"> <h1> <a class="left_btn"><</a><a class="right_btn">></a> </h1> <div class="pic_wrap" id="pic_wrap"> <div class="pic_box"> <a><img src="img/1.jpg" /></a> <h6>圖片1</h6> </div> <div class="pic_box"> <a><img src="img/2.jpg" /></a> <h6>圖片2</h6> </div> <div class="pic_box"> <a><img src="img/3.jpg" /></a> <h6>圖片3</h6> </div> <div class="pic_box"> <a><img src="img/4.jpg" /></a> <h6>圖片4</h6> </div> <div class="pic_box"> <a><img src="img/5.jpg" /></a> <h6>圖片5</h6> </div> <div class="pic_box"> <a><img src="img/6.jpg" /></a> <h6>圖片6</h6> </div> <div class="pic_box"> <a><img src="img/7.jpg" /></a> <h6>圖片7</h6> </div> <div class="pic_box"> <a><img src="img/8.jpg" /></a> <h6>圖片8</h6> </div> <div class="pic_box"> <a><img src="img/9.jpg" /></a> <h6>圖片9</h6> </div> <div class="pic_box"> <a><img src="img/10.jpg" /></a> <h6>圖片10</h6> </div> </div> </div> <!--wrap結束--> </body> </html>
現在效果如下：
添加箭頭和切圖事件
我們還需按需添加左右箭頭，方便在展示時用戶直接點擊箭頭來左右切圖，這里得通過index來判斷是否添加左箭頭或右箭頭，比如index為0時表示為第一張圖片，無需添加左箭頭；若index為(圖片數量-1)時表示展示的是最后一張圖片，則無需添加右箭頭。
至於切圖事件，由於我們把繪圖過程封裝為一個獨立函數，則點擊箭頭的時候我們把舊圖片animate並淡出再remove掉，然后再執行繪圖函數繪制新的圖片即可：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>picBox</title> <script src="jquery-1.11.1.js"></script> <style> html, body { min-height: 100%; } .wrap { width: 350px; height: 500px; border: solid 1px gray; overflow: hidden; } h1 { margin-bottom: 0px; text-align: right; border-bottom: solid 1px #CCCCCC; } h1 a:hover, .pic_box a:hover { color: blue; cursor: pointer; } .right_btn { margin: 0px 20px; } .pic_wrap { padding: 0px 15px; width: 320px; height: 430px; } .pic_box { float: left; margin: 10px 0px; width: 150px; height: 200px; text-align: center; } .pic_box a { display: block; width: 150px; height: 180px; overflow: hidden; } .pic_box h6 { margin: 0px; } .nomoe { color:#CCC; } .close_btn { width: 15px; height: 15px; text-align: center; padding: 20px; background: black; color: white; border-radius: 30px; cursor: pointer; font-family: "Arial"; opacity: 0.8; font-weight: bold; } .close_btn:hover { opacity: 1; } .left_arrow, .right_arrow { position: absolute; display: block; width: 30%; height: 100%; opacity: 0; z-index: 1003; } .left_arrow:hover, .right_arrow:hover { opacity: 1; } .left_arrow { left: 0; background: url(img/left_arrow.png) left center no-repeat; } .right_arrow { right: 0; background: url(img/right_arrow.png) right center no-repeat; } </style> <script type="text/javascript"> $(function(){ var index,nums,page=0,shows=4,temp,times=1; var $show_picBox,$black_modalback,$click_img,$title,$close,$title_wrap,$show_wrap,pic_w,pic_h; var $left_btn = $("a:first","h1"); var $right_btn = $("a:last","h1"); var $picBox = $("div","#pic_wrap"); var page_count = Math.ceil($picBox.length/shows); var $a = $("#pic_wrap a"); var $imgs = $picBox.find("img"); var $titleH6 = $picBox.find("h6"); var $left_arrow=$("<a href='#!/leftPic' class='left_arrow' title='上一張'></a>"); var $right_arrow=$("<a href='#!/rightPic' class='right_arrow' title='下一張'></a>"); temp=shows-1; $picBox.filter("div:odd").css({"margin-left":"20px"}).end().filter("div:gt("+temp+")").hide(); $left_btn.addClass("nomoe"); if(page_count<=1) $right_btn.addClass("nomoe"); $left_btn.click(function(){ if(page-1>=0){ --page; $right_btn.removeClass("nomoe"); nums = page*shows-1; nums=nums<0?0:nums; temp = (page+1)*shows; $show_picBox = $picBox.filter("div:lt("+temp+")").filter("div:gt("+nums+")").show(); $picBox.not($show_picBox).hide(); if(nums==0) $picBox.eq(0).show(); if(!page) $left_btn.addClass("nomoe"); } }) $right_btn.click(function(){ if(page+1<page_count){ ++page; $left_btn.removeClass("nomoe"); nums = page*shows-1; temp = (page+1)*shows; $show_picBox = $picBox.filter("div:lt("+temp+")").filter("div:gt("+nums+")").show(); $picBox.not($show_picBox).hide(); if(page>=page_count-1) $right_btn.addClass("nomoe"); } }) //獲取窗口大小復用 var VJ_getWin = function(){ var $win = $(window); return { h:$win.height(), w:$win.width(), t:$win.scrollTop(), l:$win.scrollLeft() } } //獲取頁面可視區域高度復用 var VJ_getBH = function(){ return Math.max($("body").height(),$("html").height()); } //居中模塊 var VJ_stayCenter = function(obj,padding){ if(!padding) padding = 0; var o_l = VJ_getWin().w/2 +padding + VJ_getWin().l; var o_h = VJ_getWin().h/2 -padding + VJ_getWin().t; var obj_w = -obj.width()/2; var obj_h = -obj.height()/2; obj.css({"left":o_l,"margin-left":obj_w, "top":o_h,"margin-top":obj_h}); } //修改圖片大小，注意得作為文檔元素而非文檔碎片時才能獲取其大小 var fixPic = function(obj){ pic_w = obj.width(); pic_h = obj.height(); var win_w = VJ_getWin().w, win_h = VJ_getWin().h; if(pic_h>win_h*0.85){ obj.css("height",win_h*0.85); } if(obj.width()>win_w*0.9){ obj.css({"height":"auto","width":win_w*0.9}); } } //箭頭點擊事件 var arrowClick = function(flag){ if(times==1){ //防抖 var instance = flag?-100:100; index = flag?index+1:index-1; var $allElem = $black_modalback.nextAll(); var cssleft = parseInt($allElem.css("left").replace("px","")) + instance; $allElem.animate({"left":cssleft,"opacity":"0"},200,function(){$allElem.remove();}); drawPic(index); $click_img.add($close).add($title).add($black_modalback).fadeIn(); times=0; //防抖 setTimeout(function(){times=1;},500); //防抖 } } //圖片顯示后是否要加左右指針 var addArrow = function(index,obj){ if(index>0){ obj.before($left_arrow); $left_arrow.on("click",function(){ arrowClick(); }) } if(index<$imgs.length-1){ obj.before($right_arrow); $right_arrow.on("click",function(){ arrowClick(1); }) } } //繪制圖片 var drawPic = function(index){ $click_img = $imgs.eq(index).clone(); $title = $("<span>"+$titleH6.eq(index).text()+"</span>"); $close = $("<a title='關閉'>X</a>"); $click_img.css({"position":"relative","padding":"15px","background":"white","z-index":1002,"display":"none"}); $close.css({"position":"absolute","z-index":1004,"display":"none","top":"-16px","right":"-16px"}).addClass("close_btn") .click(function(){ //關閉按鈕點擊事件 $close.add($click_img).add($title).add($show_wrap).add($left_arrow).add($right_arrow).remove(); //一定要加上這一行才能刪除徹底 $black_modalback.nextAll().andSelf().remove(); }); $title.css({"position":"relative","padding":"5px 15px","background":"black","color":"white","z-index":1002,"display":"none","border-radius":"6px"}); $("body").append($close).append($click_img).append($title).append($show_wrap); fixPic($click_img); //把全部元素包裹到一個div中 $show_wrap = $("<div></div>").css({"position":"absolute","width":$click_img.width()+30,"height":$click_img.height()+30}); $click_img.add($close).add($title).wrapAll($show_wrap); //title再包一層，以便居中 $title_wrap = $("<h5></h5>").css({"text-align":"center","margin":"5px 0 0 0"}); $title.wrapAll($title_wrap); //$show_wrap居中 $show_wrap = $click_img.closest("div"); //到這里會失效，得重新獲取 VJ_stayCenter($show_wrap,15); addArrow(index,$click_img); } $a.click(function(){ index = $(this).index("#pic_wrap a"); $black_modalback = $("<div></div>").css({"position":"absolute","width":"100%","height":VJ_getBH(),"background":"black","opacity":"0.6","left":"0","top":"0","z-index":1001,"display":"none"}); $("body").append($black_modalback); drawPic(index); //顯示出來 $click_img.add($close).add($title).add($black_modalback).fadeIn(); }) }) </script> </head> <body> <div class="wrap"> <h1> <a class="left_btn"><</a><a class="right_btn">></a> </h1> <div class="pic_wrap" id="pic_wrap"> <div class="pic_box"> <a><img src="img/1.jpg" /></a> <h6>圖片1</h6> </div> <div class="pic_box"> <a><img src="img/2.jpg" /></a> <h6>圖片2</h6> </div> <div class="pic_box"> <a><img src="img/3.jpg" /></a> <h6>圖片3</h6> </div> <div class="pic_box"> <a><img src="img/4.jpg" /></a> <h6>圖片4</h6> </div> <div class="pic_box"> <a><img src="img/5.jpg" /></a> <h6>圖片5</h6> </div> <div class="pic_box"> <a><img src="img/6.jpg" /></a> <h6>圖片6</h6> </div> <div class="pic_box"> <a><img src="img/7.jpg" /></a> <h6>圖片7</h6> </div> <div class="pic_box"> <a><img src="img/8.jpg" /></a> <h6>圖片8</h6> </div> <div class="pic_box"> <a><img src="img/9.jpg" /></a> <h6>圖片9</h6> </div> <div class="pic_box"> <a><img src="img/10.jpg" /></a> <h6>圖片10</h6> </div> </div> </div> <!--wrap結束--> </body> </html>
現在效果如下：
自此，我們的圖片查看器便基本完成了。
不過本例還有一些可以改進的地方，比如向左切圖時，舊圖向右淡出消失，但新圖沒有任何運動效果，如果新圖能從左到右淡入進來，會有更好的視覺交互。
另一個是本例的代碼封裝性還不高，你可以進一步封裝該代碼作為項目插件備用（也是我后續要做的事情，本來打算擴展到vajoyJS中的，不過此效果代碼較多而且項目要使用的地方也較少，故還是決定獨立出來）。
還有一個細節的地方，就是原始縮略圖只顯示了部分區域，我們應該寫一段代碼讓圖片自動縮放到父元素大小：
這個功能后續我會寫為插件擴展入vajoyJS，敬請期待。
還有類似箭頭也好、舊圖消失也好，我們都通過opacity:0來解決，這樣對IE8-的支持不好，可以考慮更換為 display:none 更佳。
本章的內容如上，祝大家假期返工路途一切順利、愉快地迎接工作日，共勉~
