Jquery 点击图片在弹出层显示大图

最新推荐文章于 2024-08-21 23:57:05 发布

莫名其喵

最新推荐文章于 2024-08-21 23:57:05 发布

阅读量4.8k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_33238935/article/details/79670933

版权

这篇博客介绍了如何利用jQuery实现图片点击后在弹出层以大图形式展示，并在再次点击时关闭。内容包括HTML和JS代码实现，同时考虑了图片及窗口尺寸的适配。

摘要由CSDN通过智能技术生成

使用jquery，

实现点击图片在弹出层显示大图，再次点击关闭，加入图片高宽和窗口高宽的大小判断。

效果图片：

1.点击前的效果：

2.点击后的效果：

html代码：

<td width="350">
    <img height="100" width="100" src="http://or7y3wqnj.bkt.clouddn.com/${fhFeed.feedImageId}" />
    <img height="100" width="100" src="http://or7y3wqnj.bkt.clouddn.com/${fhFeed.feedImageId2}" />
    <img height="100" width="100" src="http://or7y3wqnj.bkt.clouddn.com/${fhFeed.feedImageId3}" />
</td>



<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div