引言

今天，我們來(lái)探討的問(wèn)題是：

當(dāng)點(diǎn)擊圖片的時(shí)候，我們需要其全屏展示，當(dāng)我們?cè)俅吸c(diǎn)擊的時(shí)候，圖片退出全屏播放。

PS: 我們退出全屏播放的情況一般是按 esc 退出。圖片可以延伸到任何的 DOM 節(jié)點(diǎn)

在文末，我會(huì)將問(wèn)題升級(jí)，留一個(gè)題目給讀者思考??

圖片全屏，這個(gè)跟文章全屏的效果一樣，比如下面的文章全屏：

就是一個(gè)元素鋪平整個(gè)屏幕

思路

那么，問(wèn)題我們知道了。解決問(wèn)題的思路是怎么樣的呢？

• 我們獲取到圖片元素的 DOM 節(jié)點(diǎn)
• 我們調(diào)用全屏的函數(shù)進(jìn)行全屏展示
• 瀏覽器監(jiān)聽(tīng)點(diǎn)擊事件，當(dāng)圖片是全屏的狀態(tài)，再次點(diǎn)擊圖片的時(shí)候，調(diào)用函數(shù)退出全屏

好了，思路有了，我們來(lái)實(shí)現(xiàn)下。

具體實(shí)現(xiàn)

假設(shè)我們有 html 代碼如下：

<img id="image" src="path/to/image.postfix" alt="img" />

現(xiàn)在我們編寫(xiě)下 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 來(lái)編寫(xiě)

當(dāng)然，上面的代碼并沒(méi)有考慮相關(guān)的兼容性。

requestFullscreen 和 exitFullscreen 方法對(duì)現(xiàn)代的瀏覽器支持還是很可以的，在 PC 端上展示毫無(wú)壓力。

但是，我們還是得對(duì)代碼進(jìn)行瀏覽器兼容寫(xiě)法：

這里我新建了個(gè) 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('當(dāng)前瀏覽器不支持部分全屏！')
    }
  }
  public static exitFullscreen(dom: any): void {
    if (dom.exitFullscreen) {
      dom.exitFullscreen()
    } else if (dom.webkitExitFullscreen) {
      dom.webkitExitFullscreen()
    } else if (dom.msExitFullscreen) {
      dom.msExitFullscreen()
    }
  }
}

上面兩個(gè)方法都是靜態(tài)方法，調(diào)用方式 類名.靜態(tài)方法，比如：Utils.gotoFullscreen(dom)。

問(wèn)題升級(jí)

單點(diǎn)擊圖片，我們需要其全屏展示。然后設(shè)置全屏?xí)r候，右上角有一個(gè)退出的按鈕。點(diǎn)擊退出按鈕，退出全屏展示。

感興趣的讀者可以先自己嘗試下。

這里我給出簡(jiǎn)單的思路，可以作為參考。

1. 設(shè)定布局，將一個(gè) div 包裹圖片

2. 在 div 中設(shè)置一個(gè)按鈕的元素 button，并對(duì) button 進(jìn)行 css 布局

3. 在圖片全屏的時(shí)候，顯示 button，并對(duì) button 進(jìn)行按鈕事件（調(diào)用退出全屏的函數(shù)）

以上就是JavaScript 實(shí)現(xiàn)點(diǎn)擊關(guān)閉全屏示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 點(diǎn)擊關(guān)閉全屏的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論