# 图片全屏预览效果最佳实现

**Repository Path**: zhangxinxu/image-preview

## Basic Information

- **Project Name**: 图片全屏预览效果最佳实现
- **Description**: 基于startViewTransition、<dialog>等前端特性实现的图片全屏预览效果，具有视觉体验佳，无障碍访问优秀等一系列优点，即插即用，使用方便
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2026-02-24
- **Last Updated**: 2026-02-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 图片全屏预览效果最佳实现

#### 介绍
基于 `startViewTransition`、`<dialog>`等前端特性实现的图片全屏预览效果，具有视觉体验佳，无障碍访问优秀等一系列优点，即插即用，使用方便

演示页面：https://www.zhangxinxu.com/study/202602/js-image-fullscreen-demo.php
<br>
文章介绍：https://www.zhangxinxu.com/wordpress/?p=12082

#### 使用说明

1.  直接引入 `image-preview.js` 文件，注意设置 `type="module"`
2.  需要放大的图片元素设置 `is-preview` 属性即可
3.  如果希望一次性预览多个图片，设置相同的 `is-preview` 属性值即可自动成组

#### 其他说明

支持ESC快捷键退出，成组预览的时候，支持左右键控制，支持浏览器回退关闭预览。

使用了一些前端新技术，to C的生产环境可能会有兼容性问题，不过这些问题都很好处理，可以fork项目自行修改。

(以上~)