整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天主要實現一個網頁相當于按鍵盤F11按鍵全屏后的功能效果，還有鎖屏界面展示效果！
具體效果圖如下：
點擊網頁中的“全屏”，“鎖屏”按鈕即可操作
全屏后的效果
鎖屏的展示界面
實現代碼如下：
html:
css:
js:
#頭條創作挑戰賽#
本文同步本人掘金平臺的文章：https://juejin.cn/post/7135830434528624654
今天，我們來探討的問題是：
當點擊圖片的時候，我們需要其全屏展示，當我們再次點擊的時候，圖片退出全屏播放。
PS: 我們退出全屏播放的情況一般是按 esc 退出。圖片可以延伸到任何的 DOM 節點
在文末，我會將問題升級，留一個題目給讀者思考
圖片全屏，這個跟文章全屏的效果一樣，比如下面的文章全屏：
就是一個元素鋪平整個屏幕
那么，問題我們知道了。解決問題的思路是怎么樣的呢？
好了，思路有了，我們來實現下。
假設我們有 html 代碼如下：
<img id="image" src="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 進行按鈕事件（調用退出全屏的函數）
復制代碼你學廢了？
如果讀者覺得文章還可以，不防一鍵三連：關注?點贊?收藏
1、C33實現點擊圖片漸漸放大特效
?
?
2、CSS3實現圖片全屏背景特效
?
3、CSS3實現的鼠標移動到圖片上不規則放大
?
?
3、jQuery+CSS3模擬蘋果桌面系統
?
?
4、CSS3+jQuery 照片翻開效果
?
?
5、CSS3實現按鈕點擊效果
?
?
6、css3實現的縮略圖為原型的焦點圖代碼
?
?
7、一款來自國外網站圖片不規則排列的焦點圖
?
?
8、CSS3實現的點擊按鈕背景圖片不斷切換的JS代碼
?
?
9、CSS3實現鼠標移動到DIV上高亮顯示特效
?
123設計網，設計師上網導航第一品牌。歡迎訂閱本博或加微信公眾號：“123設計”
更多精彩內容請猛擊下面相關鏈接↓↓↓
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
