Html显示缩略图点击展示,JS点击缩略图整屏居中放大图片效果

需要实现的效果图：

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

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

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

$(function () {

$("img.dialog").click(function() {

var large_image = '';

$('#dialog_large_image').html($(large_image).animate({ height: '50%', width: '50%' }, 500));

});

});

上述代码实现