JS点击缩略图全屏居中放大图片实现与失真旋转问题解决

需求分析与实现方案对比

需要实现的效果图如下所示：

需求分析与实现方案对比

在开发过程中，遇到了点击缩略图后需要居中显示大图查看的需求（大致效果如上图所示）。尝试了多种实现方式，最初考虑使用animate方法让图片放大显示，但在实现图片居中显示以及点击其他区域隐藏大图时，发现逻辑较为复杂。

1. 第一种方案：点击图片直接放大

这里列出该方案的代码，供参考（或许也有其他开发者需要类似功能）：


<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>

上述代码实现的效果如下图所示：

需求分析与实现方案对比

这是最基础的渐变动画效果实现。

2. 第二种方案：点击图片全屏居中显示（推荐此方式）

HTML结构部分如下：

需求分析与实现方案对比

代码中使用了字符串拼接的方式（可作为后续开发的参考）：

关键在于第二行代码 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 + '个月</p>';
  html += '</div></div></div>';
  $container_pics.append(html);
 }
 }

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 无法生效（具体原因请参考前一篇关于 on 和 onclick 区别的文章）。

需求分析与实现方案对比

全屏居中显示代码实现


// pic zoom
 $(function() {
 //获取缩略图的点击事件，然后将大图片展示出来（样式里默认显示为```none```）
 $('.result_pics').on('click', 'img.zoom', function() { 
  var $dialog = $('#dialog_pic'); //这里的dialog_pic是整个大图的显示区域（请注意，这里之只有采用变量赋值的方式是为了

下面的代码看起来简洁，既方便自己，也方便他人。


 $dialog.show();
  // outerHeight声明了整个窗口的高度
  // 此处的代码通过上面的图片，我已经标注出来了相应的区域部分。整个页面减去大图片显示区域从上到图片的最底边所产生的距离，然后除2就可以实现图片的放大居中了。
  var marginTop = ($dialog.outerHeight() - $('.dialog-body', $dialog).outerHeight()) / 2;
  $('.dialog-body', $dialog).css({
  marginTop: marginTop
  });
 });
 // 点击显示的大图，触发事件，当触发当前页面内里任何处位置，就会隐藏显示的大图
 $('.result_pics').on('click', '#dialog_pic', function() {  
  $(this).hide();
 });
 });

至此，点击缩略图显示大图的功能基本实现。但这里存在一个Bug，即放大的图片出现失真、不清晰的情况（注：计划明天排查导致该问题的原因）。

解决上述遗留的Bug（共两个问题：一是点击放大的图片失真，二是原图放大后图片发生旋转）：

1. 解决点击放大的图片失真问题（这是因为我一开始没有放置原图，即 <img src="' + result_array[i]['photo_url'] "> 后面没有带参数）。

图片失真与旋转问题修复


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. 解决旋转的方案（该参数主要用于解决客户端iOS/Android图片横竖屏的问题，当然在网页端应用同样有效）：

imageMogr/auto-orient

至此，点击缩略图显示大图的功能实现，全部OK。

需求分析与实现方案对比

以上所述是小编给大家介绍的JS点击缩略图整屏居中放大图片效果，希望对大家有所帮助。如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！

JS实现点击缩略图全屏居中放大图片效果及Bug修复

需求分析与实现方案对比

全屏居中显示代码实现

图片失真与旋转问题修复

实用工具推荐