CSS 樣式部分（點擊縮略圖顯示的一些代碼，很重要~注意z-index: 100;這個屬性值的作用）

#dialog_pic {
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(0,0,0,0.65);
 z-index: 100;
 display: none;
 .dialog-body {
 width: 100%;
 max-width: 250px;
 max-height: 300px;
 margin: 0 auto;
 padding: 10px;
 border-radius: 5px;
 background: white;
 overflow: auto;
 margin-top: 283px;
 img {
  width: 100%;
 }
 }
}

這里必須使用on事件來獲取元素的點擊事件，onclick不產(chǎn)生作用（為什么不產(chǎn)生作用，請看上一篇文章的關(guān)于on 和onclick 的說明）

// pic zoom
 $(function() {
 //獲取縮略圖的點擊事件，然后將大圖片展示出來（樣式里默認顯示為```none```）
 $('.result_pics').on('click', 'img.zoom', function() { 
  var $dialog = $('#dialog_pic'); //這里的dialog_pic是整個大圖的顯示區(qū)域（請注意，這里之只有采用變量賦值的方式是為了

下面的代碼看起來很簡潔，方便自己，方便他人）

 $dialog.show();
  // outerHeight聲明了整個窗口的高度
  // 此處的代碼通過上面的圖片，我已經(jīng)標注出來了相應(yīng)的區(qū)域部分。整個頁面減去大圖片顯示區(qū)域從上到圖片的最底邊所產(chǎn)生的距離，然后除2就可以實現(xiàn)圖片的放大居中了。
  var marginTop = ($dialog.outerHeight() - $('.dialog-body', $dialog).outerHeight()) / 2;
  $('.dialog-body', $dialog).css({
  marginTop: marginTop
  });
 });
 // 點擊顯示的大圖，觸發(fā)事件，當(dāng)觸發(fā)當(dāng)前頁面內(nèi)里任何處位置，就會隱藏顯示的大圖
 $('.result_pics').on('click', '#dialog_pic', function() {  
  $(this).hide();
 });
 });

至此,點擊縮略圖顯示大圖的功能到這里基本實現(xiàn)。但是這里有一個bug就是放大的圖片有失真，不清晰（注：明天排查下是什么原因?qū)е碌膥）

解決上面存留的bug:（bug出現(xiàn)了2個，一個是點擊放大的圖片失真，另一個是原圖放大之后圖片會旋轉(zhuǎn)）

1.點擊放大的圖片失真(這個是我一開始沒放原圖即后面不帶參數(shù))

var html = ' ';

2.解決旋轉(zhuǎn)的方案（這個參數(shù)一般就是為了解決客戶端IOS/Android圖片橫豎屏的問題，當(dāng)然放在網(wǎng)頁端應(yīng)用也是OK的）：

imageMogr/auto-orient

至此，點擊縮略圖顯示大圖的功能實現(xiàn)，已全部OK ~

關(guān)于“JS如何實現(xiàn)點擊縮略圖整屏居中放大圖片效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。