JavaScript 实现点击关闭全屏示例详解

 更新时间:2022年08月26日 08:58:24   作者:Jimmy  
这篇文章主要为大家介绍了JavaScript 实现点击关闭全屏示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

引言

今天,我们来探讨的问题是:

当点击图片的时候,我们需要其全屏展示,当我们再次点击的时候,图片退出全屏播放。

PS: 我们退出全屏播放的情况一般是按 esc 退出。图片可以延伸到任何的 DOM 节点

在文末,我会将问题升级,留一个题目给读者思考?

图片全屏,这个跟文章全屏的效果一样,比如下面的文章全屏:

就是一个元素铺平整个屏幕

思路

那么,问题我们知道了。解决问题的思路是怎么样的呢?

  • 我们获取到图片元素的 DOM 节点
  • 我们调用全屏的函数进行全屏展示
  • 浏览器监听点击事件,当图片是全屏的状态,再次点击图片的时候,调用函数退出全屏

好了,思路有了,我们来实现下。

具体实现

假设我们有 html 代码如下:

<img id="image" src="http://9i0i.com/pic.php?p=path/to/image.postfix" alt="img" />

现在我们编写下 javascript 代码。

// 退出全屏
ngAfterViewInit() {
  const image = document.getElementById('image');
  image.addEventListener('click', (event: any) => {
    if(document.fullscreenElement === image) {
      document.exitFullscreen();
    }
    event.preventDefault();
  })
}
// 全屏查看
public fullscreenView(): void {
  const image = document.getElementById('image');
  image.requestFullscreen()
} 

这里我用了 typescript 来编写

当然,上面的代码并没有考虑相关的兼容性。

requestFullscreen 和 exitFullscreen 方法对现代的浏览器支持还是很可以的,在 PC 端上展示毫无压力。

但是,我们还是得对代码进行浏览器兼容写法:

这里我新建了个 utils.ts 的文件:

export class Utils {
  public static gotoFullscreen(dom: any): void {
    if (dom.requestFullscreen) {
      dom.requestFullscreen()
    } else if (dom.mozRequestFullScreen) {
      dom.mozRequestFullScreen()
    } else if (dom.webkitRequestFullscreen) {
      dom.webkitRequestFullscreen()
    } else if (dom.msRequestFullscreen) {
      dom.msRequestFullscreen()
    } else {
      console.error('当前浏览器不支持部分全屏!')
    }
  }
  public static exitFullscreen(dom: any): void {
    if (dom.exitFullscreen) {
      dom.exitFullscreen()
    } else if (dom.webkitExitFullscreen) {
      dom.webkitExitFullscreen()
    } else if (dom.msExitFullscreen) {
      dom.msExitFullscreen()
    }
  }
}

上面两个方法都是静态方法,调用方式 类名.静态方法,比如:Utils.gotoFullscreen(dom)。

问题升级

单点击图片,我们需要其全屏展示。然后设置全屏时候,右上角有一个退出的按钮。点击退出按钮,退出全屏展示。

感兴趣的读者可以先自己尝试下。

这里我给出简单的思路,可以作为参考。

1. 设定布局,将一个 div 包裹图片

2. 在 div 中设置一个按钮的元素 button,并对 button 进行 css 布局

3. 在图片全屏的时候,显示 button,并对 button 进行按钮事件(调用退出全屏的函数)

以上就是JavaScript 实现点击关闭全屏示例详解的详细内容,更多关于JavaScript 点击关闭全屏的资料请关注程序员之家其它相关文章!

相关文章

  • Electron 剪贴板实现示例详解

    Electron 剪贴板实现示例详解

    这篇文章主要为大家介绍了Electron 剪贴板实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 微信小程序 共用变量值的实现

    微信小程序 共用变量值的实现

    这篇文章主要介绍了微信小程序 共用变量值的实现的相关资料,需要的朋友可以参考下
    2017-07-07
  • 自行实现Promise.allSettled的Polyfill处理

    自行实现Promise.allSettled的Polyfill处理

    这篇文章主要为大家介绍了自行实现Promise.allSettled?的?Polyfill处理示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • TypeScript遍历对象属性的问题

    TypeScript遍历对象属性的问题

    这篇文章主要介绍了TypeScript遍历对象属性的问题,文章围绕TypeScript遍历对象属性的相关资料展开详细内容,需要的朋友可以参考一下
    2021-11-11
  • 2023年了该了解下WebComponent使用教程

    2023年了该了解下WebComponent使用教程

    这篇文章主要为大家介绍了2023年了该了解下WebComponent使用教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Canvas如何判断点在形状内及内置API性能详解

    Canvas如何判断点在形状内及内置API性能详解

    这篇文章主要为大家介绍了Canvas如何判断点在形状内及内置API性能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • JSON字符串转换JSONObject和JSONArray的方法

    JSON字符串转换JSONObject和JSONArray的方法

    这篇文章主要介绍了JSON字符串转换JSONObject和JSONArray的方法的相关资料,需要的朋友可以参考下
    2016-06-06
  • JavaScript事件委托原理

    JavaScript事件委托原理

    这篇文章主要介绍了JavaScript事件委托原理,?事件委托也称为事件代理。就是利用事件冒泡,把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡,那么委托就无法实现,下面我们一起来学习文章的具体详细内容吧
    2021-12-12
  • JS中轻松遍历对象属性的几种方式

    JS中轻松遍历对象属性的几种方式

    这篇文章主要给大家介绍的是JS中轻松遍历对象属性的几种方式,文章从自身可枚举属性、Object.values() 返回属性值、Object.entries()来展开介绍,感兴趣的小伙伴可以参考一下
    2021-09-09
  • 微信小程序 开发之顶部导航栏实例代码

    微信小程序 开发之顶部导航栏实例代码

    这篇文章主要介绍了微信小程序 开发之顶部导航栏实例代码的相关资料,需要的朋友可以参考下
    2017-02-02

最新评论

?


http://www.vxiaotou.com