JS给图片绑定点击事件，实现全屏查看

最新推荐文章于 2025-06-13 11:34:19 发布

爱写Bug的麦洛

最新推荐文章于 2025-06-13 11:34:19 发布

阅读量7.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： JS onclick

本文链接：https://blog.youkuaiyun.com/Milogenius/article/details/80872916

前端开发专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种简单的方法，通过HTML和JavaScript实现图片点击后全屏预览的功能。该方案适用于网页开发，尤其是需要增强用户体验的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

HI，小伙伴们，好久不见，6月份真是忙成狗的一个月，博客都没有怎么累计；新的一月，新的起点，继续加油，GO！

在项目中，如何给图片绑定事件，用户点击之后，可以全屏查看；在这里收录一下。

首先，我们看看效果图

这里写图片描述

接下来，我们晒代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onClick</title>
</head>
<body>
    <div align="center"><img src="butifulgril.jpg" width="778" height="407">
        <input type="button" name="fullsreen" value="全屏" onclick="window.open(document.location,'big','fullscreen=yes')">
        <input type="button" name="close" value="还原" onclick="window.close()"/>
    </div>
</body>
</html>