频道导航

JS点击缩略图整屏居中放大图片效果

2019-01-07 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了JS点击缩略图整屏居中放大图片效果，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

需要实现的效果图：

这里写图片描述

今天开发的时候，遇到要点击缩略图之后居中显示图片的大图查看（大致效果如上图所示）~想了好几种实现方式，最开始的时候，是想通过animate来点击图片进行显示，可是后来当我想要让放大的图片进行居中显示和点击别的地方隐藏已显示的大图的时候，才发现实现起来有难度。

1 第一张点击图片将图片放大

下面将这种方式也贴出来，供自己参考(万一有需要的小伙伴正好需要这样的功能呢)：

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

这个是最基本的渐变的效果实现。

- 2 第二种点击图片全屏居中显示（推荐这种实现方式）

HTML的样式部分：

这里写图片描述

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

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

score'] + '(' + result_array[i]['baby_gender'] + '宝' + ')

' + parseInt(result_array[i]['age_in_month']/12) + '周岁'+ result_array[i]['age_in_month']%12 + '个月

'; html += '

'; $container_pics.append(html); } }

CSS 样式部分（点击缩略图显示的一些代码，很重要~注意z-index: 100;这个属性值的作用）

这里必须使用on事件来获取元素的点击事件，onclick不产生作用（为什么不产生作用，请看上一篇文章的关于on 和onclick 的说明）

这里写图片描述

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

下面的代码看起来很简洁，方便自己，方便他人）

代码通过上面的图片，我已经标注出来了相应的区域部分。整个页面减去大图片显示区域从上到图片的最底边所产生的距离，然后除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:（bug出现了2个，一个是点击放大的图片失真，另一个是原图放大之后图片会旋转）

1.点击放大的图片失真(这个是我一开始没放原图