js全屏可以这样实现,附完整源码....

  • 内容
  • 相关

全屏阅读是个不错的阅读体验,它可以让你的视觉焦点聚集在你想关注的内容上。

一般我们按下 F11键就能让浏览器全屏显示,但这还不够好,比如:在阅读本站文章的时候,你只想让文章内容区域全屏显示,其它无关的东西像:顶部导航栏,右边的侧边栏等统统不显示。

要能实现这样的阅读体验,感觉会很不错。

没错,本文就是介绍如何实现这一用户体验需求的!

当然,在继续阅读本文之前可先在本文章页面通过以下操作来体验下这种阅读新体验:

进入全屏阅读:按键盘上的ENTER键 或 点击文章右上角带红字的”全屏阅读“按钮

退出全屏阅读:按键盘上的ENTER键 或 按ESC键 或 点击文章右上角带红字的”退出全屏“按钮

贴出实现全屏切换的完整源码,如下:


<style media="screen">
* { margin: 0; padding: 0; }
.demoWrap { width: 980px; margin: 0 auto;text-align: center;}
.demoHead,
.demoFooter,
.demoCnt .sb,
.demoCnt .cnt{background-color: #efefef;}
.demoHead,.demoFooter{display: block;height: 100px;line-height: 100px;text-align: center;}
.demoCnt{overflow: hidden;margin: 20px 0;}
.demoCnt .sb {width: 300px;min-height: 300px;line-height: 300px; float: right;margin-left: 20px;}
.demoCnt .cnt {overflow: hidden;min-height: 300px;padding: 20px;-webkit-box-sizing: border-box;
box-sizing: border-box;}
:-webkit-full-screen {}
.fullScreenElement { width: 100%; height: 100%; overflow: auto; background-color: #f00; }
.exitFullScreen { border: 1px solid #f00; }
</style>
<div class="demoWrap">
<header class="demoHead">页头</header>
<div class="demoCnt">
<div class="fr sb"> 侧边栏 </div>
<div class="cnt"> <a href="javascript:;" class="fullScreenLink" title="支持ENTER键">全屏阅读</a>
<p>全屏显示区域!!!</p>
</div>
</div>
<footer class="demoFooter"> 页脚 </footer>
</div>
<script type="text/javascript">
var $content = $(".cnt");
var content = $content[0];
var fullScreenLink = $('.fullScreenLink');
function toggleFullScreen() {
(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) ? (document.exitFullscreen ? document.exitFullscreen() : document.msExitFullscreen ? document.msExitFullscreen() :
document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitExitFullscreen && document.webkitExitFullscreen()) : (content.requestFullscreen ? content.requestFullscreen() : content.msRequestFullscreen ? content.msRequestFullscreen() :
content.mozRequestFullScreen ? content.mozRequestFullScreen() : content.webkitRequestFullscreen && content.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT))
}
$(document).on('click', '.fullScreenLink', function(event) {
event.preventDefault();
toggleFullScreen();
});
$(document).on('webkitfullscreenchange mozfullscreenchange msfullscreenchange fullscreenchange', function() {
// fullScreen,非标准,弃用
// var isFullScreen=document.fullScreen || document.webkitIsFullScreen || document.mozFullScreen || document.msFullScreen;
fullScreenLink.toggleClass('exitFullScreen');
$content.toggleClass('fullScreenElement');
// isFullScreen ? fullScreenLink.text("退出全屏") : fullScreenLink.text("全屏");
fullScreenLink.hasClass('exitFullScreen') ? fullScreenLink.text("退出全屏") : fullScreenLink.text("全屏阅读");
})
$(document).on("keydown", function(e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
});
</script>

上述代码实现全屏阅读,需要注意的几点:


全屏窗口不可滚动查看内容,全屏元素需加width: 100%;height: 100%;overflow: auto; 控制 ,以达到各浏览器显示效果一致(注:Gecko 会为元素自动添加 CSS 使其伸展以便铺满屏幕: "width: 100%; height: 100%"。 WebKit 则不会这么做;它会让全屏的元素以原始尺寸居中到屏幕中央,其余部分变为黑色。)

进入全屏标准写法requestFullscreen中的screen单词首字母是小写s,chrome/ms 只需加上各自的浏览器前缀即可,但firefox除了加前缀screen单词首个字母必须大写:mozRequestFullScreen()

全屏状态,js不能捕获到esc的 keyCode(esc键默认退出全屏)

退出全屏标准写法exitFullscreen,其它浏览器加前缀即可,但firefox使用带前缀的mozCancelFullScreen()方法来实现

F11键默认不响应fullscreenchange()方法,必需先调用requestFullscreen(),再按F11键,该键才会触发fullscreenchange()方法,也就是说用户按F11进入全屏模式,也必须再次按F11才能退出该全屏模式!

ie11不支持fullscreenchange(),edge版本才支持,而且进入全屏也无任何提示,这体验感觉不能再差啦,鄙视!


js全屏可以这样实现,附完整源码....
         本页正文内容约3404个文字
         本文标签:

         版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。

         本文链接:https://suppore.cn/566.html   百度已收录

发表评论

电子邮件地址不会被公开, 推荐使用QQ快速评论!

评论

4条评论
  1. avatar

    不值不购 Lv.1 Chrome 53.0.2785.104 Chrome 53.0.2785.104 Windows 7 x64 Edition Windows 7 x64 Edition 回复

    弄了很久还是没有弄好

    福建省泉州市 联通

    1. 小陈 Lv.6 Chrome 45.0.2454.101 Chrome 45.0.2454.101 Windows 7 Windows 7 回复

      回复了不值不购:熟悉了js的构造很简单的。

            湖南省 电信

  2. avatar

    教你吃水果 Lv.1 Firefox 53.0 Firefox 53.0 Windows Windows 回复

    速度有点慢啊

    湖北省武汉市 电信

    1. 小陈 Lv.6 Chrome 45.0.2454.101 Chrome 45.0.2454.101 Windows 7 Windows 7 回复

      回复了教你吃水果:还可以吧。

            湖南省 电信

00:00 / 00:00
顺序播放