JS如何实现点击缩略图整屏居中放大图片效果

这篇文章将为大家详细讲解有关JS如何实现点击缩略图整屏居中放大图片效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司是一家专业提供拱墅企业网站建设,专注与成都网站制作、做网站、H5高端网站建设、小程序制作等业务。10年已为拱墅众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

需要实现的效果图：

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

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

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

$(function () { $("img.dialog").click(function() { var large_image = ''; $('#dialog_large_image').html($(large_image).animate({ height: '50%', width: '50%' }, 500)); }); });

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

JS如何实现点击缩略图整屏居中放大图片效果

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

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

HTML的样式部分：

JS如何实现点击缩略图整屏居中放大图片效果

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

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

for (var i in result_array) {
  var html = '';
  var html = '

#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%; } } }

// 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(); }); });

大橙子网站建设，新征程启航

JS如何实现点击缩略图整屏居中放大图片效果

其他资讯