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

要实现的效果图：

在今天的开发过程中，遇到了点击缩略图后在中心显示图片的大比例视图(大致效果如上图所示)~想到了几个实现。刚开始的时候想点击图片显示，后来想在中央显示放大图片，点击别的地方隐藏显示的大比例图片，发现很难实现。

1首先点击图片放大

下面也贴了这个方法供大家参考(万一有需要的小伙伴正好需要这个功能):

div img class=' dialog ' src=' http : xx . jpg ' div id=' dialog _ large _ image '/div/div script type=' text/JavaScript ' $(function(){ $(' img . dialog ')。单击(function(){ var large _ image=' img src=' $(this))。attr(' src ')'/img '；$('#dialog_large_image ')。html($(large_image)。动画({ height: '50% '，width: '50%' }，500))；});});/script上面代码的效果如下图所示：

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

-2第二次点击图片显示在全屏中央(建议这样实现)

HTML的样式部分：

代码部分采用字符串拼接(可以供以后参考):

重要的是第二行var html=.

for(result _ array中的var I){ var html=' '；var html=' div id=' dialog _ pic ' div class=' dialog-body ' img src=' http : ' result _ array[I][' photo _ URL ']'？imageView2/1/w/128/h/128 '/div/div class=' fault _ stream _ pic ' div class=' item '；if(result _ array[I][' photo _ URL ']){ html=' img class=' zoom ' src=' http : ' result _ array[I][' photo _ URL ']'？imageview 2/1/w/128/h/128“”；} html=' div span ' result _ array[I][' final _ score ']'/span span(' result _ array[I][' baby _ gender ']'宝')/spanp ' par sent(result _ array[I])。[' age _ in _ month ']/12)' age ' result _ array[I][' age _ in _ month ']' months/p '；html='/div/div/div '；$ container _ pics . append(html)；} }CSS样式部分(点击缩略图显示的一些代码，很重要~注意z-index : 100；这个属性值的作用)

#dialog_pic { position:已修复；top : 0；bottom : 0；left : 0；right : 0；background: rgba(0，0，0，0.65)；z-index : 100；display:无；对话框正文{ width : 100%；最大宽度： 250 px；max-height : 300 px；margin: 0 autopadding: 10pxborder-radius : 5px；背景：白色；飞越：汽车；保证金-top : 283 px；img { width : 100%；}}}在这里，必须使用on事件来获取元素的click事件，onclick不起作用(为什么不起作用，请看上一篇文章对on和onclick的描述)

//pic zoom $(function() {//获取缩略图的点击事件，然后显示大图(样式中默认显示为` `无` `)$()。result _ pics’)。on ('click '，' img。zoom '，function () {var $ dialog=。//这里的dialog_pic是整个大图的显示区域(请注意，这里给变量赋值的唯一方法是让下面的代码看起来简单，方便自己和他人)

$ dialog . show()；//outhealth声明整个窗口的高度。//我已经通过上图标出了相应的区域。从整张页面减去大图显示区顶部到图片底边的距离，然后除以2，将图片放大居中。var marginTop=($ dialog . ExternalHeight()-$(')。dialog-body '，$dialog)。outhealth())/2；$('.dialog-body '，$dialog)。CSS({ marginto p : marginto p })；});//点击显示的大图触发事件。当事件在当前页面的任何地方被触发时，显示的大图像$('。result _ pics’)。on ('click '，' # dialog _ pic '，function () {$ (this)。hide()；});});至此，点击缩略图显示大图的功能在这里基本实现了。但是这里有一个bug，就是放大后的图片失真不清晰(注：明天查查是什么原因导致的~)

解决bug:(上面留下的bug(有两个bug，一个是点击放大后的图像失真，另一个是原图像放大后图像会旋转)

1.点击放大要失真的图片(这是因为我一开始没有显示原始图片img src=' http : ' result _ array[I][' photo _ URL ']'也就是后面没有参数)

var html=' div id=' dialog _ pic ' div class=' dialog-body ' img src=' http : ' result _ array[I][' photo _ URL ']'？imageMogr/auto-oriented '/div/div class=' falls _ stream _ pic ' div class=' item '；2.旋转的解决方案(这个参数一般是为了解决客户端IOS/Android图片横竖屏的问题，当然放在网页上也可以):

图像监视器/自动定向

至此，点击缩略图显示大图的功能已经实现，一切正常~

以上是边肖介绍的JS点击缩略图，将整个屏幕中间的画面效果放大，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！