快捷導(dǎo)航

JS點(diǎn)擊縮略圖整屏居中放大圖片效果

更新時(shí)間：2017年07月04日 09:57:34 作者：兩個(gè)人兩座城

今天開(kāi)發(fā)的時(shí)候，遇到要點(diǎn)擊縮略圖之后居中顯示圖片的大圖查看（大致效果如上圖所示）~想了好幾種實(shí)現(xiàn)方式,下面通過(guò)本文給大家分享JS點(diǎn)擊縮略圖整屏居中放大圖片效果，需要的朋友參考下吧

需要實(shí)現(xiàn)的效果圖：

這里寫(xiě)圖片描述

今天開(kāi)發(fā)的時(shí)候，遇到要點(diǎn)擊縮略圖之后居中顯示圖片的大圖查看（大致效果如上圖所示）~想了好幾種實(shí)現(xiàn)方式，最開(kāi)始的時(shí)候，是想通過(guò)animate來(lái)點(diǎn)擊圖片進(jìn)行顯示，可是后來(lái)當(dāng)我想要讓放大的圖片進(jìn)行居中顯示和點(diǎn)擊別的地方隱藏已顯示的大圖的時(shí)候，才發(fā)現(xiàn)實(shí)現(xiàn)起來(lái)有難度。

1 第一張點(diǎn)擊圖片將圖片放大

下面將這種方式也貼出來(lái)，供自己參考(萬(wàn)一有需要的小伙伴正好需要這樣的功能呢)：

<div>
 <img class="dialog" src="xxx.jpg">
 <div id="dialog_large_image"></div>
</div>
<script type="text/javascript">
 $(function () {
  $("img.dialog").click(function() {
   var large_image = '<img src= ' + $(this).attr("src") + '></img>';
   $('#dialog_large_image').html($(large_image).animate({ height: '50%', width: '50%' }, 500));
  });
 });
</script>

上述代碼實(shí)現(xiàn)的效果如下圖所示：

這里寫(xiě)圖片描述

這個(gè)是最基本的漸變的效果實(shí)現(xiàn)。

- 2 第二種點(diǎn)擊圖片全屏居中顯示（推薦這種實(shí)現(xiàn)方式）

HTML的樣式部分：

這里寫(xiě)圖片描述

代碼部分用到了字符串的拼接（可以以后做參考用）：

重要的是第二行var html = ...

for (var i in result_array) {
  var html = '';
  var html = '<div id="dialog_pic"><div class="dialog-body"><img src="' + result_array[i]['photo_url'] + '?imageView2/1/w/128/h/128"></div></div> <div class="waterfall_stream_pic"><div class="item">';
  if (result_array[i]['photo_url']) {
  html += '<img class="zoom" src="' + result_array[i]['photo_url'] + '?imageView2/1/w/128/h/128">';
  }
  html += '<div><span>' + result_array[i]['final_score'] + '</span><span>(' + result_array[i]['baby_gender'] + '寶' + ')</span><p>' + parseInt(result_array[i]['age_in_month']/12) + '周歲'+ result_array[i]['age_in_month']%12 + '個(gè)月</p>';
  html += '</div></div></div>';
  $container_pics.append(html);
 }
 }

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

#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事件來(lái)獲取元素的點(diǎn)擊事件，onclick不產(chǎn)生作用（為什么不產(chǎn)生作用，請(qǐng)看上一篇文章的關(guān)于on 和onclick 的說(shuō)明）

這里寫(xiě)圖片描述

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

下面的代碼看起來(lái)很簡(jiǎn)潔，方便自己，方便他人）

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

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

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

1.點(diǎn)擊放大的圖片失真(這個(gè)是我一開(kāi)始沒(méi)放原圖<img src="' + result_array[i]['photo_url'] ">即后面不帶參數(shù))

var html = '<div id="dialog_pic"><div class="dialog-body"><img src="' + result_array[i]['photo_url'] + '?imageMogr/auto-orient"></div></div> <div class="waterfall_stream_pic"><div class="item">';

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

imageMogr/auto-orient

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

這里寫(xiě)圖片描述