JS实现浏览器全屏

Posted 2023-04-30

参考技术A 注解：ele要全屏的元素

退出全屏直接使用document调用exitFullscreen方法即可。

document.fullscreenElement()：获取当前全屏的元素。

注意：
1.document下没有requestFullscreen
2.requestFullscreen方法只能由用户触发，比如：在onload事件中不能触发
3.页面跳转需先退出全屏
4.进入全屏的元素，将脱离其父元素，所以可能导致某些css失效
解决方案：使用 :full-screen伪类 为元素添加全屏时的样式（使用时为了兼容注意添加-webkit、-moz或-ms前缀）
5.一个元素全屏后，其子元素要再全屏，需先让该元素退出全屏

pagePiling.js - 创建美丽的全屏滚动效果

在线演示

在线演示

本地下载

全屏滚动效果是近期很流行的网页设计形式，带给用户良好的视觉和交互体验。

pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果。支持全部的主流浏览器，包含IE8+。支持移动设备。