Element Fullscreen

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Element Fullscreen</title>
    <style>
      .img {
        width: 200px;
        transition: width 2s ease, background-color 2s ease;
 
        &:fullscreen {
          overflow: hidden;
          padding: 20px;
          background-color: pink;
 
          &::backdrop {
            background-color: transparent;
          }
        }
      }
    </style>
  </head>
  <body>
    <strong>Element Fullscreen</strong>
    <hr />
    <span>点击图片进入全屏，按下esc或再次点击图片退出全屏</span>
    <img src="./test.jpg" alt="" class="img" />
 
    <script>
      const img = document.querySelector('.img');
 
      img.addEventListener('click', async () => {
        if (!document.fullscreenElement) {
          await img.requestFullscreen();
        } else {
          await document.exitFullscreen();
        }
      });
    </script>
  </body>
</html>

posted @ 2024-05-01 15:40 _clai 阅读(10) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Element Capture API

· canvas 捕获视频帧

· JavaScript: FullScreen

· 浏览器全屏——document.documentElement.requestFullscreen();

· 某个标签需要全屏显示

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现

公告

昵称： _clai
园龄： 4年11个月
粉丝： 0
关注： 7

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. uniapp 文件管理器(文件选择)(4)

_clai

Element Fullscreen

公告

搜索

常用链接

最新随笔

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Element Fullscreen</title>
	<style>
	.img {
	width: 200px;
	transition: width 2s ease, background-color 2s ease;

	&:fullscreen {
	overflow: hidden;
	padding: 20px;
	background-color: pink;

	&::backdrop {
	background-color: transparent;
	}
	}
	}
	</style>
	</head>
	<body>
	<strong>Element Fullscreen</strong>
	<hr />
	<span>点击图片进入全屏，按下esc或再次点击图片退出全屏</span>
	<img src="./test.jpg" alt="" class="img" />

	<script>
	const img = document.querySelector('.img');

	img.addEventListener('click', async () => {
	if (!document.fullscreenElement) {
	await img.requestFullscreen();
	} else {
	await document.exitFullscreen();
	}
	});
	</script>
	</body>
	</html>