HTML 单击图片独立显示放大效果实现方法_html img图片点击放大效果(1)

最新推荐文章于 2024-10-13 20:55:11 发布

2401_84010762

最新推荐文章于 2024-10-13 20:55:11 发布

阅读量853

点赞数 4

CC 4.0 BY-SA版权

分类专栏：程序员文章标签： html 前端

本文链接：https://blog.csdn.net/2401_84010762/article/details/137462118

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);

}

.modal-image {
display: block;
max-width: 90%;
max-height: 90%;
margin: auto;
margin-top: 5%;
}


在上述示例中，通过CSS定义了一个名为**`.modal`**的样式，用于控制模态框的显示和样式。**`.modal`** 类设置了模态框的固定定位、背景颜色和透明度等属性。另外，**`.modal-image`** 类定义了模态框中图片的样式，包括最大宽度和最大高度，并将其在水平和垂直方向上居中。


在HTML中，使用 **`<img>`**标签来展示图片，通过 **`onclick`** 事件调用 JavaScript 中的 **`showModal()`** 函数来显示模态框。模态框的关闭通过模态框本身的 **`onclick`**事件调用 JavaScript 中的 **`hideModal()`**函数来实现。


JavaScript 部分定义了两个函数：**`showModal()`**用于显示模态框并设置模态框中图片的源，**`hideModal()`**用于隐藏模态框。
**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数Python工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天