JS如何实现点击缩略图整屏居中放大图片效果-创新互联

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

我们提供的服务有：网站制作、成都网站制作、微信公众号开发、网站优化、网站认证、南湖ssl等。为成百上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的南湖网站制作公司

需要实现的效果图：

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

今天开发的时候，遇到要点击缩略图之后居中显示图片的大图查看（大致效果如上图所示）~想了好几种实现方式，最开始的时候，是想通过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如何实现点击缩略图整屏居中放大图片效果-创新互联

其他资讯